<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/multipage/common-dom-interfaces.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:35:32 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/standard.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/spec.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=../styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  
  <script defer="" crossorigin="" src=../html-dfn.js></script>
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   <hgroup><h1 class=allcaps>HTML</h1><p id=living-standard>Living Standard — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   
   

   
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=urls-and-fetching.html>← 2.4 URLs</a> — <a href=index.html>Table of Contents</a> — <a href=structured-data.html>2.7 Safe passing of structured data →</a></nav><ol class=toc><li id=toc-infrastructure><ol><li><a href=common-dom-interfaces.html#common-dom-interfaces><span class=secno>2.6</span> Common DOM interfaces</a><ol><li><a href=common-dom-interfaces.html#reflecting-content-attributes-in-idl-attributes><span class=secno>2.6.1</span> Reflecting content attributes in IDL attributes</a><li><a href=common-dom-interfaces.html#using-reflect-via-idl-extended-attributes><span class=secno>2.6.2</span> Using reflect via IDL extended attributes</a><li><a href=common-dom-interfaces.html#using-reflect-in-specifications><span class=secno>2.6.3</span> Using reflect in specifications</a><li><a href=common-dom-interfaces.html#collections><span class=secno>2.6.4</span> Collections</a><ol><li><a href=common-dom-interfaces.html#the-htmlallcollection-interface><span class=secno>2.6.4.1</span> The <code>HTMLAllCollection</code> interface</a><ol><li><a href=common-dom-interfaces.html#HTMLAllCollection-call><span class=secno>2.6.4.1.1</span> [[Call]] ( <var>thisArgument</var>, <var>argumentsList</var> )</a></ol><li><a href=common-dom-interfaces.html#the-htmlformcontrolscollection-interface><span class=secno>2.6.4.2</span> The <code>HTMLFormControlsCollection</code> interface</a><li><a href=common-dom-interfaces.html#the-htmloptionscollection-interface><span class=secno>2.6.4.3</span> The <code>HTMLOptionsCollection</code> interface</a></ol><li><a href=common-dom-interfaces.html#the-domstringlist-interface><span class=secno>2.6.5</span> The <code>DOMStringList</code> interface</a></ol></ol></ol><h3 id=common-dom-interfaces><span class=secno>2.6</span> Common DOM interfaces<a href=#common-dom-interfaces class=self-link></a></h3>

  <h4 id=reflecting-content-attributes-in-idl-attributes><span class=secno>2.6.1</span> Reflecting content attributes in IDL attributes<a href=#reflecting-content-attributes-in-idl-attributes class=self-link></a></h4>

  <p>The building blocks for reflecting are as follows:</p>

  <ul><li><p>A <dfn id=reflected-target>reflected target</dfn> is an element or <code id=reflecting-content-attributes-in-idl-attributes:elementinternals><a href=custom-elements.html#elementinternals>ElementInternals</a></code>
   object. It is typically clear from context and typically identical to the interface of the
   <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute>reflected IDL attribute</a>. It is always identical to that interface when it is an
   <code id=reflecting-content-attributes-in-idl-attributes:elementinternals-2><a href=custom-elements.html#elementinternals>ElementInternals</a></code> object.<li><p>A <dfn id=reflected-idl-attribute>reflected IDL attribute</dfn> is an attribute interface member.<li><p>A <dfn id=reflected-content-attribute-name>reflected content attribute name</dfn> is a string. When the <a href=#reflected-target id=reflecting-content-attributes-in-idl-attributes:reflected-target>reflected
   target</a> is an element, it represents the local name of a content attribute whose namespace
   is null. When the <a href=#reflected-target id=reflecting-content-attributes-in-idl-attributes:reflected-target-2>reflected target</a> is an <code id=reflecting-content-attributes-in-idl-attributes:elementinternals-3><a href=custom-elements.html#elementinternals>ElementInternals</a></code> object, it
   represents a key of the <a href=#reflected-target id=reflecting-content-attributes-in-idl-attributes:reflected-target-3>reflected target</a>'s <a href=custom-elements.html#internals-target id=reflecting-content-attributes-in-idl-attributes:internals-target>target
   element</a>'s <a id=reflecting-content-attributes-in-idl-attributes:internal-content-attribute-map href=custom-elements.html#internal-content-attribute-map>internal content attribute map</a>.</ul>

  <p>A <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-2>reflected IDL attribute</a> can be defined to <dfn id=reflect data-export="">reflect</dfn> a
  <a href=#reflected-content-attribute-name id=reflecting-content-attributes-in-idl-attributes:reflected-content-attribute-name>reflected content attribute name</a> of a <a href=#reflected-target id=reflecting-content-attributes-in-idl-attributes:reflected-target-4>reflected target</a>. In general this
  means that the IDL attribute getter returns the current value of the content attribute, and the
  setter changes the value of the content attribute to the given value.</p>

  

  <p><a href=#reflected-target id=reflecting-content-attributes-in-idl-attributes:reflected-target-5>Reflected targets</a> have these associated algorithms:

  <ul class=brief><li><dfn id=get-the-element>get the element</dfn>: takes no arguments; returns an element.<li><dfn id=get-the-content-attribute>get the content attribute</dfn>: takes no arguments; returns null or a string.<li><dfn id=set-the-content-attribute>set the content attribute</dfn>: takes a string <var>value</var>; returns nothing.<li><dfn id=delete-the-content-attribute>delete the content attribute</dfn>: takes no arguments; returns nothing.</ul>

  <p>For a <a href=#reflected-target id=reflecting-content-attributes-in-idl-attributes:reflected-target-6>reflected target</a> that is an element <var>element</var>, these are defined as
  follows:</p>

  <dl><dt><a href=#get-the-element id=reflecting-content-attributes-in-idl-attributes:get-the-element>get the element</a><dd><ol><li><p>Return <var>element</var>.</ol><dt><a href=#get-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:get-the-content-attribute>get the content attribute</a><dd>
    <ol><li><p>Let <var>attribute</var> be the result of running <a href=https://dom.spec.whatwg.org/#concept-element-attributes-get-by-namespace id=reflecting-content-attributes-in-idl-attributes:concept-element-attributes-get-by-namespace data-x-internal=concept-element-attributes-get-by-namespace>get an attribute by namespace and local
     name</a> given null, the <a href=#reflected-content-attribute-name id=reflecting-content-attributes-in-idl-attributes:reflected-content-attribute-name-2>reflected content attribute name</a>, and
     <var>element</var>.<li><p>If <var>attribute</var> is null, then return null.<li><p>Return <var>attribute</var>'s <a href=https://dom.spec.whatwg.org/#concept-attribute-value id=reflecting-content-attributes-in-idl-attributes:concept-attribute-value data-x-internal=concept-attribute-value>value</a>.</ol>
   <dt><a href=#set-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:set-the-content-attribute>set the content attribute</a> with a string <var>value</var><dd><ol><li><p><a href=https://dom.spec.whatwg.org/#concept-element-attributes-set-value id=reflecting-content-attributes-in-idl-attributes:concept-element-attributes-set-value data-x-internal=concept-element-attributes-set-value>Set an attribute value</a>
   given <var>element</var>, the <a href=#reflected-content-attribute-name id=reflecting-content-attributes-in-idl-attributes:reflected-content-attribute-name-3>reflected content attribute name</a>, and
   <var>value</var>.</ol><dt><a href=#delete-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:delete-the-content-attribute>delete the content attribute</a><dd><ol><li><p><a href=https://dom.spec.whatwg.org/#concept-element-attributes-remove-by-namespace id=reflecting-content-attributes-in-idl-attributes:concept-element-attributes-remove-by-namespace data-x-internal=concept-element-attributes-remove-by-namespace>Remove an attribute
   by namespace and local name</a> given null, the <a href=#reflected-content-attribute-name id=reflecting-content-attributes-in-idl-attributes:reflected-content-attribute-name-4>reflected content attribute name</a>,
   and <var>element</var>.</ol></dl>

  <p>For a <a href=#reflected-target id=reflecting-content-attributes-in-idl-attributes:reflected-target-7>reflected target</a> that is an <code id=reflecting-content-attributes-in-idl-attributes:elementinternals-4><a href=custom-elements.html#elementinternals>ElementInternals</a></code> object
  <var>elementInternals</var>, they are defined as follows:</p>

  <dl><dt><a href=#get-the-element id=reflecting-content-attributes-in-idl-attributes:get-the-element-2>get the element</a><dd><ol><li><p>Return <var>elementInternals</var>'s <a href=custom-elements.html#internals-target id=reflecting-content-attributes-in-idl-attributes:internals-target-2>target
   element</a>.</ol><dt><a href=#get-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:get-the-content-attribute-2>get the content attribute</a><dd>
    <ol><li><p>If <var>elementInternals</var>'s <a href=custom-elements.html#internals-target id=reflecting-content-attributes-in-idl-attributes:internals-target-3>target element</a>'s
     <a id=reflecting-content-attributes-in-idl-attributes:internal-content-attribute-map-2 href=custom-elements.html#internal-content-attribute-map>internal content attribute map</a>[the <a href=#reflected-content-attribute-name id=reflecting-content-attributes-in-idl-attributes:reflected-content-attribute-name-5>reflected content attribute name</a>]
     <a href=https://infra.spec.whatwg.org/#map-exists id=reflecting-content-attributes-in-idl-attributes:map-exists data-x-internal=map-exists>does not exist</a>, then return null.

     <li><p>Return <var>elementInternals</var>'s <a href=custom-elements.html#internals-target id=reflecting-content-attributes-in-idl-attributes:internals-target-4>target
     element</a>'s <a id=reflecting-content-attributes-in-idl-attributes:internal-content-attribute-map-3 href=custom-elements.html#internal-content-attribute-map>internal content attribute map</a>[the <a href=#reflected-content-attribute-name id=reflecting-content-attributes-in-idl-attributes:reflected-content-attribute-name-6>reflected content
     attribute name</a>].</ol>
   <dt><a href=#set-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:set-the-content-attribute-2>set the content attribute</a> with a string <var>value</var><dd><ol><li><p><a href=https://infra.spec.whatwg.org/#map-set id=reflecting-content-attributes-in-idl-attributes:map-set data-x-internal=map-set>Set</a> <var>elementInternals</var>'s <a href=custom-elements.html#internals-target id=reflecting-content-attributes-in-idl-attributes:internals-target-5>target element</a>'s <a id=reflecting-content-attributes-in-idl-attributes:internal-content-attribute-map-4 href=custom-elements.html#internal-content-attribute-map>internal content attribute map</a>[the
   <a href=#reflected-content-attribute-name id=reflecting-content-attributes-in-idl-attributes:reflected-content-attribute-name-7>reflected content attribute name</a>] to <var>value</var>.</ol><dt><a href=#delete-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:delete-the-content-attribute-2>delete the content attribute</a><dd><ol><li><p><a href=https://infra.spec.whatwg.org/#map-remove id=reflecting-content-attributes-in-idl-attributes:map-remove data-x-internal=map-remove>Remove</a> <var>elementInternals</var>'s <a href=custom-elements.html#internals-target id=reflecting-content-attributes-in-idl-attributes:internals-target-6>target element</a>'s <a id=reflecting-content-attributes-in-idl-attributes:internal-content-attribute-map-5 href=custom-elements.html#internal-content-attribute-map>internal content attribute map</a>[the
   <a href=#reflected-content-attribute-name id=reflecting-content-attributes-in-idl-attributes:reflected-content-attribute-name-8>reflected content attribute name</a>].</ol></dl>

  <p class=note>This results in somewhat redundant data structures for
  <code id=reflecting-content-attributes-in-idl-attributes:elementinternals-5><a href=custom-elements.html#elementinternals>ElementInternals</a></code> objects as their <a href=custom-elements.html#internals-target id=reflecting-content-attributes-in-idl-attributes:internals-target-7>target
  element</a>'s <a id=reflecting-content-attributes-in-idl-attributes:internal-content-attribute-map-6 href=custom-elements.html#internal-content-attribute-map>internal content attribute map</a> cannot be directly manipulated and as
  such reflection is only happening in a single direction. This approach was nevertheless chosen to
  make it less error-prone to define IDL attributes that are shared between <a href=#reflected-target id=reflecting-content-attributes-in-idl-attributes:reflected-target-8>reflected targets</a> and benefit from common API semantics.</p>

  <hr>

  <p>IDL attributes of type <code id=reflecting-content-attributes-in-idl-attributes:idl-domstring><a data-x-internal=idl-domstring href=https://webidl.spec.whatwg.org/#idl-DOMString>DOMString</a></code> or <code><a href=https://webidl.spec.whatwg.org/#idl-DOMString id=reflecting-content-attributes-in-idl-attributes:idl-domstring-2 data-x-internal=idl-domstring>DOMString</a>?</code> that <a href=#reflect id=reflecting-content-attributes-in-idl-attributes:reflect>reflect</a> <a href=common-microsyntaxes.html#enumerated-attribute id=reflecting-content-attributes-in-idl-attributes:enumerated-attribute>enumerated</a> content attributes can be <dfn id=limited-to-only-known-values>limited to only known values</dfn>.
  Per the processing models below, those will cause the getters for such IDL attributes to only
  return keywords for those enumerated attributes, or the empty string or null.</p>

  <p>If a <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-3>reflected IDL attribute</a> has the type <code id=reflecting-content-attributes-in-idl-attributes:idl-domstring-3><a data-x-internal=idl-domstring href=https://webidl.spec.whatwg.org/#idl-DOMString>DOMString</a></code>:</p>

  <ul><li>
    <p>The getter steps are:</p>

    <ol><li><p>Let <var>element</var> be the result of running <a id=reflecting-content-attributes-in-idl-attributes:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#get-the-element id=reflecting-content-attributes-in-idl-attributes:get-the-element-3>get the
     element</a>.<li><p>Let <var>contentAttributeValue</var> be the result of running <a id=reflecting-content-attributes-in-idl-attributes:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s
     <a href=#get-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:get-the-content-attribute-3>get the content attribute</a>.<li><p>Let <var>attributeDefinition</var> be the attribute definition of <var>element</var>'s
     content attribute whose namespace is null and local name is the <a href=#reflected-content-attribute-name id=reflecting-content-attributes-in-idl-attributes:reflected-content-attribute-name-9>reflected content
     attribute name</a>.

     <li>
      <p>If <var>attributeDefinition</var> indicates it is an <a id=reflecting-content-attributes-in-idl-attributes:enumerated-attribute-2 href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a> and
      the <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-4>reflected IDL attribute</a> is defined to be <a href=#limited-to-only-known-values id=reflecting-content-attributes-in-idl-attributes:limited-to-only-known-values>limited to only known
      values</a>:</p>

      <ol><li><p>If <var>contentAttributeValue</var> does not correspond to any state of
       <var>attributeDefinition</var> (e.g., it is null and there is no <i id=reflecting-content-attributes-in-idl-attributes:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i>), or if it is in a state of
       <var>attributeDefinition</var> with no associated keyword value, then return the empty
       string.<li><p>Return the <a id=reflecting-content-attributes-in-idl-attributes:canonical-keyword href=common-microsyntaxes.html#canonical-keyword>canonical keyword</a> for the state of
       <var>attributeDefinition</var> that <var>contentAttributeValue</var> corresponds to.</ol>
     <li><p>If <var>contentAttributeValue</var> is null, then return the empty string.<li><p>Return <var>contentAttributeValue</var>.</ol>
   <li><p>The setter steps are to run <a id=reflecting-content-attributes-in-idl-attributes:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#set-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:set-the-content-attribute-3>set the content attribute</a>
   with the given value.</ul>

  <p>If a <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-5>reflected IDL attribute</a> has the type <code><a href=https://webidl.spec.whatwg.org/#idl-DOMString id=reflecting-content-attributes-in-idl-attributes:idl-domstring-4 data-x-internal=idl-domstring>DOMString</a>?</code>:</p>

  <ul><li>
    <p>The getter steps are:</p>

    <ol><li><p>Let <var>element</var> be the result of running <a id=reflecting-content-attributes-in-idl-attributes:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#get-the-element id=reflecting-content-attributes-in-idl-attributes:get-the-element-4>get the
     element</a>.<li><p>Let <var>contentAttributeValue</var> be the result of running <a id=reflecting-content-attributes-in-idl-attributes:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s
     <a href=#get-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:get-the-content-attribute-4>get the content attribute</a>.<li><p>Let <var>attributeDefinition</var> be the attribute definition of <var>element</var>'s
     content attribute whose namespace is null and local name is the <a href=#reflected-content-attribute-name id=reflecting-content-attributes-in-idl-attributes:reflected-content-attribute-name-10>reflected content
     attribute name</a>.

     <li>
      <p>If <var>attributeDefinition</var> indicates it is an <a id=reflecting-content-attributes-in-idl-attributes:enumerated-attribute-3 href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a>:</p>

      <ol><li><p><a id=reflecting-content-attributes-in-idl-attributes:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: the <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-6>reflected IDL attribute</a> is <a href=#limited-to-only-known-values id=reflecting-content-attributes-in-idl-attributes:limited-to-only-known-values-2>limited to only
       known values</a>.<li><p><a id=reflecting-content-attributes-in-idl-attributes:assert-2 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>contentAttributeValue</var> corresponds to a state of
       <var>attributeDefinition</var>.<li><p>If <var>contentAttributeValue</var> corresponds to a state of
       <var>attributeDefinition</var> with no associated keyword value, then return null.<li><p>Return the <a id=reflecting-content-attributes-in-idl-attributes:canonical-keyword-2 href=common-microsyntaxes.html#canonical-keyword>canonical keyword</a> for the state of
       <var>attributeDefinition</var> that <var>contentAttributeValue</var> corresponds to.</ol>
     <li><p>Return <var>contentAttributeValue</var>.</ol>
   <li>
    <p>The setter steps are:</p>

    <ol><li><p>If the given value is null, then run <a id=reflecting-content-attributes-in-idl-attributes:this-6 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#delete-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:delete-the-content-attribute-3>delete the content
     attribute</a>.<li><p>Otherwise, run <a id=reflecting-content-attributes-in-idl-attributes:this-7 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#set-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:set-the-content-attribute-4>set the content attribute</a> with the given
     value.</ol>
   </ul>

  <p>If a <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-7>reflected IDL attribute</a> has the type <code id=reflecting-content-attributes-in-idl-attributes:idl-usvstring><a data-x-internal=idl-usvstring href=https://webidl.spec.whatwg.org/#idl-USVString>USVString</a></code>, optionally <dfn id=treated-as-a-url>treated as a URL</dfn>:</p>

  <ul><li>
    <p>The getter steps are:</p>

    <ol><li><p>Let <var>element</var> be the result of running <a id=reflecting-content-attributes-in-idl-attributes:this-8 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#get-the-element id=reflecting-content-attributes-in-idl-attributes:get-the-element-5>get the
     element</a>.<li><p>Let <var>contentAttributeValue</var> be the result of running <a id=reflecting-content-attributes-in-idl-attributes:this-9 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s
     <a href=#get-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:get-the-content-attribute-5>get the content attribute</a>.<li>
      <p>If the <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-8>reflected IDL attribute</a> is <a href=#treated-as-a-url id=reflecting-content-attributes-in-idl-attributes:treated-as-a-url>treated as a URL</a>:</p>

      <ol><li><p>If <var>contentAttributeValue</var> is null, then return the empty string.<li><p>Let <var>urlString</var> be the result of <a id=reflecting-content-attributes-in-idl-attributes:encoding-parsing-and-serializing-a-url href=urls-and-fetching.html#encoding-parsing-and-serializing-a-url>encoding-parsing-and-serializing a
       URL</a> given <var>contentAttributeValue</var>, relative to <var>element</var>'s
       <a id=reflecting-content-attributes-in-idl-attributes:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li><p>If <var>urlString</var> is not failure, then return <var>urlString</var>.</ol>
     <li><p>Return <var>contentAttributeValue</var>, <a href=https://infra.spec.whatwg.org/#javascript-string-convert id=reflecting-content-attributes-in-idl-attributes:convert data-x-internal=convert>converted to a scalar value string</a>.</ol>
   <li><p>The setter steps are to run <a id=reflecting-content-attributes-in-idl-attributes:this-10 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#set-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:set-the-content-attribute-5>set the content attribute</a>
   with the given value.</ul>

  <p>If a <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-9>reflected IDL attribute</a> has the type <code id=reflecting-content-attributes-in-idl-attributes:idl-boolean><a data-x-internal=idl-boolean href=https://webidl.spec.whatwg.org/#idl-boolean>boolean</a></code>:</p>

  <ul><li>
    <p>The getter steps are:</p>

    <ol><li><p>Let <var>contentAttributeValue</var> be the result of running <a id=reflecting-content-attributes-in-idl-attributes:this-11 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s
     <a href=#get-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:get-the-content-attribute-6>get the content attribute</a>.<li><p>If <var>contentAttributeValue</var> is null, then return false.<li><p>Return true.</ol>
   <li>
    <p>The setter steps are:</p>

    <ol><li><p>If the given value is false, then run <a id=reflecting-content-attributes-in-idl-attributes:this-12 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#delete-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:delete-the-content-attribute-4>delete the content
     attribute</a>.<li><p>If the given value is true, then run <a id=reflecting-content-attributes-in-idl-attributes:this-13 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#set-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:set-the-content-attribute-6>set the content
     attribute</a> with the empty string.
    </ol>
   </ul>

  <p class=note>This corresponds to the rules for <a href=common-microsyntaxes.html#boolean-attribute id=reflecting-content-attributes-in-idl-attributes:boolean-attribute>boolean content
  attributes</a>.

  <p>If a <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-10>reflected IDL attribute</a> has the type <code id=reflecting-content-attributes-in-idl-attributes:idl-long><a data-x-internal=idl-long href=https://webidl.spec.whatwg.org/#idl-long>long</a></code>,
  optionally <dfn id=limited-to-only-non-negative-numbers>limited to only non-negative numbers</dfn> and optionally with a <dfn id=default-value>default
  value</dfn> <var>defaultValue</var>:

  <ul><li>
    <p>The getter steps are:</p>

    <ol><li><p>Let <var>contentAttributeValue</var> be the result of running <a id=reflecting-content-attributes-in-idl-attributes:this-14 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s
     <a href=#get-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:get-the-content-attribute-7>get the content attribute</a>.<li>
      <p>If <var>contentAttributeValue</var> is not null:

      <ol><li><p>Let <var>parsedValue</var> be the result of <a href=common-microsyntaxes.html#rules-for-parsing-integers id=reflecting-content-attributes-in-idl-attributes:rules-for-parsing-integers>integer parsing</a> <var>contentAttributeValue</var> if the <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-11>reflected IDL
       attribute</a> is not <a href=#limited-to-only-non-negative-numbers id=reflecting-content-attributes-in-idl-attributes:limited-to-only-non-negative-numbers>limited to only non-negative numbers</a>; otherwise the
       result of <a href=common-microsyntaxes.html#rules-for-parsing-non-negative-integers id=reflecting-content-attributes-in-idl-attributes:rules-for-parsing-non-negative-integers>non-negative integer
       parsing</a> <var>contentAttributeValue</var>.<li><p>If <var>parsedValue</var> is not an error and is within the <code id=reflecting-content-attributes-in-idl-attributes:idl-long-2><a data-x-internal=idl-long href=https://webidl.spec.whatwg.org/#idl-long>long</a></code> range, then return <var>parsedValue</var>.</ol>
     <li><p>If the <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-12>reflected IDL attribute</a> has a <a href=#default-value id=reflecting-content-attributes-in-idl-attributes:default-value>default value</a>, then
     return <var>defaultValue</var>.<li><p>If the <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-13>reflected IDL attribute</a> is <a href=#limited-to-only-non-negative-numbers id=reflecting-content-attributes-in-idl-attributes:limited-to-only-non-negative-numbers-2>limited to only non-negative
     numbers</a>, then return −1.<li><p>Return 0.</ol>
   <li>
    <p>The setter steps are:</p>

    <ol><li><p>If the <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-14>reflected IDL attribute</a> is <a href=#limited-to-only-non-negative-numbers id=reflecting-content-attributes-in-idl-attributes:limited-to-only-non-negative-numbers-3>limited to only non-negative
     numbers</a> and the given value is negative, then throw an
     <a id=reflecting-content-attributes-in-idl-attributes:indexsizeerror href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=reflecting-content-attributes-in-idl-attributes:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Run <a id=reflecting-content-attributes-in-idl-attributes:this-15 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#set-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:set-the-content-attribute-7>set the content attribute</a> with the given value
     converted to the shortest possible string representing the number as a <a id=reflecting-content-attributes-in-idl-attributes:valid-integer href=common-microsyntaxes.html#valid-integer>valid
     integer</a>.</ol>
   </ul>

  <p>If a <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-15>reflected IDL attribute</a> has the type <code id=reflecting-content-attributes-in-idl-attributes:idl-unsigned-long><a data-x-internal=idl-unsigned-long href=https://webidl.spec.whatwg.org/#idl-unsigned-long>unsigned long</a></code>, optionally <dfn id=limited-to-only-non-negative-numbers-greater-than-zero>limited to only positive
  numbers</dfn>, <dfn id=limited-to-only-non-negative-numbers-greater-than-zero-with-fallback>limited to only positive
  numbers with fallback</dfn>, or <dfn id=clamped-to-the-range>clamped to the range</dfn> [<var>clampedMin</var>,
  <var>clampedMax</var>], and optionally with a <a href=#default-value id=reflecting-content-attributes-in-idl-attributes:default-value-2>default value</a> <var>defaultValue</var>:

  <ul><li>
    <p>The getter steps are:</p>

    <ol><li><p>Let <var>contentAttributeValue</var> be the result of running <a id=reflecting-content-attributes-in-idl-attributes:this-16 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s
     <a href=#get-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:get-the-content-attribute-8>get the content attribute</a>.<li><p>Let <var>minimum</var> be 0.<li><p>If the <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-16>reflected IDL attribute</a> is <a href=#limited-to-only-non-negative-numbers-greater-than-zero id=reflecting-content-attributes-in-idl-attributes:limited-to-only-non-negative-numbers-greater-than-zero>limited to only positive
     numbers</a> or <a href=#limited-to-only-non-negative-numbers-greater-than-zero-with-fallback id=reflecting-content-attributes-in-idl-attributes:limited-to-only-non-negative-numbers-greater-than-zero-with-fallback>limited to only positive numbers with fallback</a>, then set
     <var>minimum</var> to 1.<li><p>If the <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-17>reflected IDL attribute</a> is <a href=#clamped-to-the-range id=reflecting-content-attributes-in-idl-attributes:clamped-to-the-range>clamped to the range</a>, then
     set <var>minimum</var> to <var>clampedMin</var>.<li><p>Let <var>maximum</var> be 2147483647 if the <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-18>reflected IDL attribute</a> is not
     <a href=#clamped-to-the-range id=reflecting-content-attributes-in-idl-attributes:clamped-to-the-range-2>clamped to the range</a>; otherwise <var>clampedMax</var>.<li>
      <p>If <var>contentAttributeValue</var> is not null:

      <ol><li><p>Let <var>parsedValue</var> be the result of <a href=common-microsyntaxes.html#rules-for-parsing-non-negative-integers id=reflecting-content-attributes-in-idl-attributes:rules-for-parsing-non-negative-integers-2>non-negative integer parsing</a>
       <var>contentAttributeValue</var>.<li><p>If <var>parsedValue</var> is not an error and is in the range <var>minimum</var> to
       <var>maximum</var>, inclusive, then return <var>parsedValue</var>.<li>
        <p>If <var>parsedValue</var> is not an error and the <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-19>reflected IDL attribute</a> is
        <a href=#clamped-to-the-range id=reflecting-content-attributes-in-idl-attributes:clamped-to-the-range-3>clamped to the range</a>:

        <ol><li><p>If <var>parsedValue</var> is less than <var>minimum</var>, then return
         <var>minimum</var>.<li><p>Return <var>maximum</var>.</ol>
       </ol>
     <li><p>If the <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-20>reflected IDL attribute</a> has a <a href=#default-value id=reflecting-content-attributes-in-idl-attributes:default-value-3>default value</a>, then
     return <var>defaultValue</var>.<li><p>Return <var>minimum</var>.</ol>
   <li>
    <p>The setter steps are:</p>

    <ol><li><p>If the <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-21>reflected IDL attribute</a> is <a href=#limited-to-only-non-negative-numbers-greater-than-zero id=reflecting-content-attributes-in-idl-attributes:limited-to-only-non-negative-numbers-greater-than-zero-2>limited to only positive
     numbers</a> and the given value is 0, then throw an
     <a id=reflecting-content-attributes-in-idl-attributes:indexsizeerror-2 href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=reflecting-content-attributes-in-idl-attributes:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Let <var>minimum</var> be 0.<li><p>If the <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-22>reflected IDL attribute</a> is <a href=#limited-to-only-non-negative-numbers-greater-than-zero id=reflecting-content-attributes-in-idl-attributes:limited-to-only-non-negative-numbers-greater-than-zero-3>limited to only positive
     numbers</a> or <a href=#limited-to-only-non-negative-numbers-greater-than-zero-with-fallback id=reflecting-content-attributes-in-idl-attributes:limited-to-only-non-negative-numbers-greater-than-zero-with-fallback-2>limited to only positive numbers with fallback</a>, then set
     <var>minimum</var> to 1.<li><p>Let <var>newValue</var> be <var>minimum</var>.<li><p>If the <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-23>reflected IDL attribute</a> has a <a href=#default-value id=reflecting-content-attributes-in-idl-attributes:default-value-4>default value</a>, then set
     <var>newValue</var> to <var>defaultValue</var>.<li><p>If the given value is in the range <var>minimum</var> to 2147483647, inclusive,
     then set <var>newValue</var> to it.<li><p>Run <a id=reflecting-content-attributes-in-idl-attributes:this-17 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#set-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:set-the-content-attribute-8>set the content attribute</a> with <var>newValue</var>
     converted to the shortest possible string representing the number as a <a id=reflecting-content-attributes-in-idl-attributes:valid-non-negative-integer href=common-microsyntaxes.html#valid-non-negative-integer>valid non-negative
     integer</a>.</ol>

    <p class=note><a href=#clamped-to-the-range id=reflecting-content-attributes-in-idl-attributes:clamped-to-the-range-4>Clamped to the range</a> has no effect on the setter steps.</p>
   </ul>
  

  <p>If a <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-24>reflected IDL attribute</a> has the type <code id=reflecting-content-attributes-in-idl-attributes:idl-double><a data-x-internal=idl-double href=https://webidl.spec.whatwg.org/#idl-double>double</a></code>,
  optionally <a href=#limited-to-only-non-negative-numbers-greater-than-zero id=limited-to-numbers-greater-than-zero>limited to only positive numbers</a>
  and optionally with a <a href=#default-value id=reflecting-content-attributes-in-idl-attributes:default-value-5>default value</a> <var>defaultValue</var>:

  <ul><li>
    <p>The getter steps are:</p>

    <ol><li><p>Let <var>contentAttributeValue</var> be the result of running <a id=reflecting-content-attributes-in-idl-attributes:this-18 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s
     <a href=#get-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:get-the-content-attribute-9>get the content attribute</a>.<li>
      <p>If <var>contentAttributeValue</var> is not null:

      <ol><li><p>Let <var>parsedValue</var> be the result of <a href=common-microsyntaxes.html#rules-for-parsing-floating-point-number-values id=reflecting-content-attributes-in-idl-attributes:rules-for-parsing-floating-point-number-values>floating-point number parsing</a>
       <var>contentAttributeValue</var>.<li><p>If <var>parsedValue</var> is not an error and is greater than 0, then return
       <var>parsedValue</var>.<li><p>If <var>parsedValue</var> is not an error and the <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-25>reflected IDL attribute</a>
       is not <a href=#limited-to-only-non-negative-numbers-greater-than-zero id=reflecting-content-attributes-in-idl-attributes:limited-to-only-non-negative-numbers-greater-than-zero-4>limited to only positive numbers</a>, then return
       <var>parsedValue</var>.</ol>
     <li><p>If the <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-26>reflected IDL attribute</a> has a <a href=#default-value id=reflecting-content-attributes-in-idl-attributes:default-value-6>default value</a>, then
     return <var>defaultValue</var>.<li><p>Return 0.</ol>
   <li>
    <p>The setter steps are:</p>

    <ol><li><p>If the <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-27>reflected IDL attribute</a> is <a href=#limited-to-only-non-negative-numbers-greater-than-zero id=reflecting-content-attributes-in-idl-attributes:limited-to-only-non-negative-numbers-greater-than-zero-5>limited to only positive
     numbers</a> and the given value is not greater than 0, then return.<li><p>Run <a id=reflecting-content-attributes-in-idl-attributes:this-19 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#set-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:set-the-content-attribute-9>set the content attribute</a> with the given value,
     converted to the <a id=reflecting-content-attributes-in-idl-attributes:best-representation-of-the-number-as-a-floating-point-number href=common-microsyntaxes.html#best-representation-of-the-number-as-a-floating-point-number>best representation of the number as a floating-point
     number</a>.</ol>
   </ul>

  <p class=note>The values Infinity and Not-a-Number (NaN) values throw an exception on setting,
  as defined in <cite>Web IDL</cite>. <a href=references.html#refsWEBIDL>[WEBIDL]</a></p>

  <p>If a <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-28>reflected IDL attribute</a> has the type <code id=reflecting-content-attributes-in-idl-attributes:domtokenlist><a data-x-internal=domtokenlist href=https://dom.spec.whatwg.org/#interface-domtokenlist>DOMTokenList</a></code>, then its
  getter steps are to return a <code id=reflecting-content-attributes-in-idl-attributes:domtokenlist-2><a data-x-internal=domtokenlist href=https://dom.spec.whatwg.org/#interface-domtokenlist>DOMTokenList</a></code> object whose associated element is
  <a id=reflecting-content-attributes-in-idl-attributes:this-20 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> and associated attribute's local name is the <a href=#reflected-content-attribute-name id=reflecting-content-attributes-in-idl-attributes:reflected-content-attribute-name-11>reflected content
  attribute name</a>. Specification authors cannot reflect IDL attributes of this type on
  <code id=reflecting-content-attributes-in-idl-attributes:elementinternals-6><a href=custom-elements.html#elementinternals>ElementInternals</a></code>.</p>
  

  <p>If a <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-29>reflected IDL attribute</a> has the type <code><var>T</var>?</code>,
  where <var>T</var> is either <code id=reflecting-content-attributes-in-idl-attributes:element><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code> or an interface that inherits from
  <code id=reflecting-content-attributes-in-idl-attributes:element-2><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code>, then with <var>attr</var> being the <a href=#reflected-content-attribute-name id=reflecting-content-attributes-in-idl-attributes:reflected-content-attribute-name-12>reflected content attribute
  name</a>:</p>

  <ul><li><p>Its <a href=#reflected-target id=reflecting-content-attributes-in-idl-attributes:reflected-target-9>reflected target</a> has an <dfn id=explicitly-set-attr-element>explicitly set
   <var>attr</var>-element</dfn>, which is a weak reference to an element or null. It is initially
   null.<li>
    <p>Its <a href=#reflected-target id=reflecting-content-attributes-in-idl-attributes:reflected-target-10>reflected target</a> <var>reflectedTarget</var> has a <dfn data-dfn-for=Element,ElementInternals id=attr-associated-element data-export="">get the
    <var>attr</var>-associated element</dfn> algorithm, that runs these steps:</p>

    <ol><li><p>Let <var>element</var> be the result of running <var>reflectedTarget</var>'s <a href=#get-the-element id=reflecting-content-attributes-in-idl-attributes:get-the-element-6>get
     the element</a>.<li><p>Let <var>contentAttributeValue</var> be the result of running
     <var>reflectedTarget</var>'s <a href=#get-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:get-the-content-attribute-10>get the content attribute</a>.<li>
      <p>If <var>reflectedTarget</var>'s <a href=#explicitly-set-attr-element id=reflecting-content-attributes-in-idl-attributes:explicitly-set-attr-element>explicitly set <var>attr</var>-element</a> is not
      null:</p>

      <ol><li><p>If <var>reflectedTarget</var>'s <a href=#explicitly-set-attr-element id=reflecting-content-attributes-in-idl-attributes:explicitly-set-attr-element-2>explicitly set <var>attr</var>-element</a> is
       a <a id=reflecting-content-attributes-in-idl-attributes:descendant href=https://dom.spec.whatwg.org/#concept-tree-descendant data-x-internal=descendant>descendant</a> of any of <var>element</var>'s <a href=https://dom.spec.whatwg.org/#concept-shadow-including-ancestor id=reflecting-content-attributes-in-idl-attributes:concept-shadow-including-ancestor data-x-internal=concept-shadow-including-ancestor>shadow-including ancestors</a>, then return
       <var>reflectedTarget</var>'s <a href=#explicitly-set-attr-element id=reflecting-content-attributes-in-idl-attributes:explicitly-set-attr-element-3>explicitly set <var>attr</var>-element</a>.<li><p>Return null.</ol>
     <li>
      <p>Otherwise, if <var>contentAttributeValue</var> is not null, return the first element
      <var>candidate</var>, in <a id=reflecting-content-attributes-in-idl-attributes:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>, that meets the following criteria:</p>

      <ul><li><p><var>candidate</var>'s <a id=reflecting-content-attributes-in-idl-attributes:root href=https://dom.spec.whatwg.org/#concept-tree-root data-x-internal=root>root</a> is the same as <var>element</var>'s
       <a id=reflecting-content-attributes-in-idl-attributes:root-2 href=https://dom.spec.whatwg.org/#concept-tree-root data-x-internal=root>root</a>;<li><p><var>candidate</var>'s <a href=https://dom.spec.whatwg.org/#concept-id id=reflecting-content-attributes-in-idl-attributes:concept-id data-x-internal=concept-id>ID</a> is
       <var>contentAttributeValue</var>; and<li><p><var>candidate</var> <a id=reflecting-content-attributes-in-idl-attributes:implements href=https://webidl.spec.whatwg.org/#implements data-x-internal=implements>implements</a> <var>T</var>.</ul>

      <p>If no such element exists, then return null.</p>
     <li><p>Return null.</ol>
   <li><p>The getter steps are to return the result of running <a id=reflecting-content-attributes-in-idl-attributes:this-21 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#attr-associated-element id=reflecting-content-attributes-in-idl-attributes:attr-associated-element>get the
   <var>attr</var>-associated element</a>.<li>
    <p>The setter steps are:</p>
    <ol><li>
      <p>If the given value is null, then:</p>

      <ol><li><p>Set <a id=reflecting-content-attributes-in-idl-attributes:this-22 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#explicitly-set-attr-element id=reflecting-content-attributes-in-idl-attributes:explicitly-set-attr-element-4>explicitly set <var>attr</var>-element</a> to
       null.<li><p>Run <a id=reflecting-content-attributes-in-idl-attributes:this-23 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#delete-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:delete-the-content-attribute-5>delete the content attribute</a>.<li><p>Return.</ol>
     <li><p>Run <a id=reflecting-content-attributes-in-idl-attributes:this-24 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#set-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:set-the-content-attribute-10>set the content attribute</a> with the empty
     string.<li><p>Set <a id=reflecting-content-attributes-in-idl-attributes:this-25 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#explicitly-set-attr-element id=reflecting-content-attributes-in-idl-attributes:explicitly-set-attr-element-5>explicitly set <var>attr</var>-element</a> to a weak
     reference to the given value.</ol>
   <li>
    <p>For element <a href=#reflected-target id=reflecting-content-attributes-in-idl-attributes:reflected-target-11>reflected targets</a> only: the following
    <a href=https://dom.spec.whatwg.org/#concept-element-attributes-change-ext id=reflecting-content-attributes-in-idl-attributes:concept-element-attributes-change-ext data-x-internal=concept-element-attributes-change-ext>attribute change steps</a>, given
    <var>element</var>, <var>localName</var>, <var>oldValue</var>, <var>value</var>, and
    <var>namespace</var>, are used to synchronize between the content attribute and the IDL
    attribute:</p>

    <ol><li><p>If <var>localName</var> is not <var>attr</var> or <var>namespace</var> is not null, then
     return.<li><p>Set <var>element</var>'s <a href=#explicitly-set-attr-element id=reflecting-content-attributes-in-idl-attributes:explicitly-set-attr-element-6>explicitly set <var>attr</var>-element</a> to
     null.</ol>
   </ul>

  <p class=note><a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-30>Reflected IDL attributes</a> of this
  type are strongly encouraged to have their identifier end in "<code>Element</code>" for
  consistency.</p>

  <p>If a <a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-31>reflected IDL attribute</a> has the type <code>FrozenArray&lt;<var>T</var>>?</code>, where <var>T</var> is either
  <code id=reflecting-content-attributes-in-idl-attributes:element-3><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code> or an interface that inherits from <code id=reflecting-content-attributes-in-idl-attributes:element-4><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code>, then with
  <var>attr</var> being the <a href=#reflected-content-attribute-name id=reflecting-content-attributes-in-idl-attributes:reflected-content-attribute-name-13>reflected content attribute name</a>:</p>

  <ul><li><p>Its <a href=#reflected-target id=reflecting-content-attributes-in-idl-attributes:reflected-target-12>reflected target</a> has an <dfn id=explicitly-set-attr-elements>explicitly set
   <var>attr</var>-elements</dfn>, which is either a <a id=reflecting-content-attributes-in-idl-attributes:list href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> of weak references to
   elements or null. It is initially null.<li><p>Its <a href=#reflected-target id=reflecting-content-attributes-in-idl-attributes:reflected-target-13>reflected target</a> has a <dfn id=cached-attr-associated-elements>cached <var>attr</var>-associated
   elements</dfn>, which is a <a id=reflecting-content-attributes-in-idl-attributes:list-2 href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> of elements. It is initially « ».<li><p>Its <a href=#reflected-target id=reflecting-content-attributes-in-idl-attributes:reflected-target-14>reflected target</a> has a <dfn id=cached-attr-associated-elements-object>cached <var>attr</var>-associated
   elements object</dfn>, which is a <code>FrozenArray&lt;<var>T</var>>?</code>. It is
   initially null.<li>
    <p>Its <a href=#reflected-target id=reflecting-content-attributes-in-idl-attributes:reflected-target-15>reflected target</a> <var>reflectedTarget</var> has a <dfn data-dfn-for=Element,ElementInternals id=attr-associated-elements data-export="">get the
    <var>attr</var>-associated elements</dfn> algorithm, which runs these steps:</p>

    <ol><li><p>Let <var>elements</var> be an empty <a id=reflecting-content-attributes-in-idl-attributes:list-3 href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a>.<li><p>Let <var>element</var> be the result of running <var>reflectedTarget</var>'s <a href=#get-the-element id=reflecting-content-attributes-in-idl-attributes:get-the-element-7>get
     the element</a>.<li>
      <p>If <var>reflectedTarget</var>'s <a href=#explicitly-set-attr-elements id=reflecting-content-attributes-in-idl-attributes:explicitly-set-attr-elements>explicitly set <var>attr</var>-elements</a> is not
      null:</p>

      <ol><li>
        <p><a href=https://infra.spec.whatwg.org/#list-iterate id=reflecting-content-attributes-in-idl-attributes:list-iterate data-x-internal=list-iterate>For each</a> <var>attrElement</var> in
        <var>reflectedTarget</var>'s <a href=#explicitly-set-attr-elements id=reflecting-content-attributes-in-idl-attributes:explicitly-set-attr-elements-2>explicitly set <var>attr</var>-elements</a>:</p>

        <ol><li><p>If <var>attrElement</var> is not a <a id=reflecting-content-attributes-in-idl-attributes:descendant-2 href=https://dom.spec.whatwg.org/#concept-tree-descendant data-x-internal=descendant>descendant</a> of any of
         <var>element</var>'s <a href=https://dom.spec.whatwg.org/#concept-shadow-including-ancestor id=reflecting-content-attributes-in-idl-attributes:concept-shadow-including-ancestor-2 data-x-internal=concept-shadow-including-ancestor>shadow-including
         ancestors</a>, then <a id=reflecting-content-attributes-in-idl-attributes:continue href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>.<li><p><a href=https://infra.spec.whatwg.org/#list-append id=reflecting-content-attributes-in-idl-attributes:list-append data-x-internal=list-append>Append</a> <var>attrElement</var> to
         <var>elements</var>.</ol>
       </ol>
     <li>
      <p>Otherwise:</p>

      <ol><li><p>Let <var>contentAttributeValue</var> be the result of running
       <var>reflectedTarget</var>'s <a href=#get-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:get-the-content-attribute-11>get the content attribute</a>.

       <li><p>If <var>contentAttributeValue</var> is null, then return null.<li><p>Let <var>tokens</var> be <var>contentAttributeValue</var>, <a href=https://infra.spec.whatwg.org/#split-on-ascii-whitespace id=reflecting-content-attributes-in-idl-attributes:split-a-string-on-spaces data-x-internal=split-a-string-on-spaces>split on ASCII whitespace</a>.

       <li>
        <p><a href=https://infra.spec.whatwg.org/#list-iterate id=reflecting-content-attributes-in-idl-attributes:list-iterate-2 data-x-internal=list-iterate>For each</a> <var>id</var> of <var>tokens</var>:</p>

        <ol><li>
          <p>Let <var>candidate</var> be the first element, in <a id=reflecting-content-attributes-in-idl-attributes:tree-order-2 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>, that meets
          the following criteria:</p>

          <ul><li><p><var>candidate</var>'s <a id=reflecting-content-attributes-in-idl-attributes:root-3 href=https://dom.spec.whatwg.org/#concept-tree-root data-x-internal=root>root</a> is the same as <var>element</var>'s
           <a id=reflecting-content-attributes-in-idl-attributes:root-4 href=https://dom.spec.whatwg.org/#concept-tree-root data-x-internal=root>root</a>;<li><p><var>candidate</var>'s <a href=https://dom.spec.whatwg.org/#concept-id id=reflecting-content-attributes-in-idl-attributes:concept-id-2 data-x-internal=concept-id>ID</a> is <var>id</var>;
           and<li><p><var>candidate</var> <a id=reflecting-content-attributes-in-idl-attributes:implements-2 href=https://webidl.spec.whatwg.org/#implements data-x-internal=implements>implements</a> <var>T</var>.</ul>

          <p>If no such element exists, then <a id=reflecting-content-attributes-in-idl-attributes:continue-2 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>.</p>
         <li><p><a href=https://infra.spec.whatwg.org/#list-append id=reflecting-content-attributes-in-idl-attributes:list-append-2 data-x-internal=list-append>Append</a> <var>candidate</var> to
         <var>elements</var>.</ol>
       </ol>
     <li><p>Return <var>elements</var>.</ol>
   <li>
    <p>The getter steps are:</p>

    <ol><li><p>Let <var>elements</var> be the result of running <a id=reflecting-content-attributes-in-idl-attributes:this-26 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#attr-associated-elements id=reflecting-content-attributes-in-idl-attributes:attr-associated-elements>get the
     <var>attr</var>-associated elements</a>.<li><p>If the contents of <var>elements</var> is equal to the contents of <a id=reflecting-content-attributes-in-idl-attributes:this-27 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s
     <a href=#cached-attr-associated-elements id=reflecting-content-attributes-in-idl-attributes:cached-attr-associated-elements>cached <var>attr</var>-associated elements</a>, then return <a id=reflecting-content-attributes-in-idl-attributes:this-28 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s
     <a href=#cached-attr-associated-elements-object id=reflecting-content-attributes-in-idl-attributes:cached-attr-associated-elements-object>cached <var>attr</var>-associated elements object</a>.<li><p>Let <var>elementsAsFrozenArray</var> be <var>elements</var>, <a href=https://webidl.spec.whatwg.org/#es-type-mapping id=reflecting-content-attributes-in-idl-attributes:concept-idl-convert data-x-internal=concept-idl-convert>converted</a> to a <code>FrozenArray&lt;<var>T</var>>?</code>.<li><p>Set <a id=reflecting-content-attributes-in-idl-attributes:this-29 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#cached-attr-associated-elements id=reflecting-content-attributes-in-idl-attributes:cached-attr-associated-elements-2>cached <var>attr</var>-associated elements</a> to
     <var>elements</var>.<li><p>Set <a id=reflecting-content-attributes-in-idl-attributes:this-30 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#cached-attr-associated-elements-object id=reflecting-content-attributes-in-idl-attributes:cached-attr-associated-elements-object-2>cached <var>attr</var>-associated elements object</a>
     to <var>elementsAsFrozenArray</var>.<li><p>Return <var>elementsAsFrozenArray</var>.</ol>

    <p class=note>This extra caching layer is necessary to preserve the invariant that <code>element.reflectedElements === element.reflectedElements</code>.</p>
   <li>
    <p>The setter steps are:</p>
    <ol><li>
      <p>If the given value is null:</p>

      <ol><li><p>Set <a id=reflecting-content-attributes-in-idl-attributes:this-31 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#explicitly-set-attr-elements id=reflecting-content-attributes-in-idl-attributes:explicitly-set-attr-elements-3>explicitly set <var>attr</var>-elements</a> to
       null.<li><p>Run <a id=reflecting-content-attributes-in-idl-attributes:this-32 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#delete-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:delete-the-content-attribute-6>delete the content attribute</a>.<li><p>Return.</ol>
     <li><p>Run <a id=reflecting-content-attributes-in-idl-attributes:this-33 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#set-the-content-attribute id=reflecting-content-attributes-in-idl-attributes:set-the-content-attribute-11>set the content attribute</a> with the empty
     string.<li><p>Let <var>elements</var> be an empty <a id=reflecting-content-attributes-in-idl-attributes:list-4 href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a>.<li>
      <p><a href=https://infra.spec.whatwg.org/#list-iterate id=reflecting-content-attributes-in-idl-attributes:list-iterate-3 data-x-internal=list-iterate>For each</a> <var>element</var> in the given value:</p>

      <ol><li><p><a href=https://infra.spec.whatwg.org/#list-append id=reflecting-content-attributes-in-idl-attributes:list-append-3 data-x-internal=list-append>Append</a> a weak reference to <var>element</var> to
       <var>elements</var>.</ol>
     <li><p>Set <a id=reflecting-content-attributes-in-idl-attributes:this-34 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#explicitly-set-attr-elements id=reflecting-content-attributes-in-idl-attributes:explicitly-set-attr-elements-4>explicitly set <var>attr</var>-elements</a> to
     <var>elements</var>.</ol>
   <li>
    <p>For element <a href=#reflected-target id=reflecting-content-attributes-in-idl-attributes:reflected-target-16>reflected targets</a> only: the following
    <a href=https://dom.spec.whatwg.org/#concept-element-attributes-change-ext id=reflecting-content-attributes-in-idl-attributes:concept-element-attributes-change-ext-2 data-x-internal=concept-element-attributes-change-ext>attribute change steps</a>, given
    <var>element</var>, <var>localName</var>, <var>oldValue</var>, <var>value</var>, and
    <var>namespace</var>, are used to synchronize between the content attribute and the IDL
    attribute:</p>

    <ol><li><p>If <var>localName</var> is not <var>attr</var> or <var>namespace</var> is not null, then
     return.<li><p>Set <var>element</var>'s <a href=#explicitly-set-attr-elements id=reflecting-content-attributes-in-idl-attributes:explicitly-set-attr-elements-5>explicitly set <var>attr</var>-elements</a> to
     null.</ol>
   </ul>

  <p class=note><a href=#reflected-idl-attribute id=reflecting-content-attributes-in-idl-attributes:reflected-idl-attribute-32>Reflected IDL attributes</a> of this
  type are strongly encouraged to have their identifier end in "<code>Elements</code>" for
  consistency.</p>

  <h4 id=using-reflect-via-idl-extended-attributes><span class=secno>2.6.2</span> Using reflect via IDL extended attributes<a href=#using-reflect-via-idl-extended-attributes class=self-link></a></h4>

  <p><a href=#reflect id=using-reflect-via-idl-extended-attributes:reflect>Reflection</a> can be used from IDL through <a href=https://webidl.spec.whatwg.org/#dfn-extended-attribute id=using-reflect-via-idl-extended-attributes:extended-attribute data-x-internal=extended-attribute>extended attributes</a>. <dfn id=xattr-reflect data-dfn-type=extended-attribute data-lt=Reflect><code>[Reflect]</code></dfn>, <dfn id=xattr-reflectsetter data-dfn-type=extended-attribute data-lt=ReflectSetter><code>[ReflectSetter]</code></dfn>, <dfn id=xattr-reflecturl data-dfn-type=extended-attribute data-lt=ReflectURL><code>[ReflectURL]</code></dfn>,
  <dfn id=xattr-reflectnonnegative data-dfn-type=extended-attribute data-lt=ReflectNonNegative><code>[ReflectNonNegative]</code></dfn>, <dfn id=xattr-reflectpositive data-dfn-type=extended-attribute data-lt=ReflectPositive><code>[ReflectPositive]</code></dfn>, and
  <dfn id=xattr-reflectpositivewithfallback data-dfn-type=extended-attribute data-lt=ReflectPositiveWithFallback><code>[ReflectPositiveWithFallback]</code></dfn> all
  trigger <a href=#reflect id=using-reflect-via-idl-extended-attributes:reflect-2>reflection</a>. These must either take no arguments, or take a
  string; they must not appear on anything other than an interface member attribute; and only one of
  these can be used at a time.</p>

  <p>For one of these primary reflection <a href=https://webidl.spec.whatwg.org/#dfn-extended-attribute id=using-reflect-via-idl-extended-attributes:extended-attribute-2 data-x-internal=extended-attribute>extended
  attributes</a>, its <a href=#reflected-content-attribute-name id=using-reflect-via-idl-extended-attributes:reflected-content-attribute-name>reflected content attribute name</a> is the string value it takes,
  if one is provided; otherwise it is the IDL attribute name <a id=using-reflect-via-idl-extended-attributes:converted-to-ascii-lowercase href=https://infra.spec.whatwg.org/#ascii-lowercase data-x-internal=converted-to-ascii-lowercase>converted to ASCII
  lowercase</a>.</p>

  <p>IDL attributes with the <code id=using-reflect-via-idl-extended-attributes:xattr-reflect><a href=#xattr-reflect>[Reflect]</a></code> <a id=using-reflect-via-idl-extended-attributes:extended-attribute-3 href=https://webidl.spec.whatwg.org/#dfn-extended-attribute data-x-internal=extended-attribute>extended
  attribute</a> must <a href=#reflect id=using-reflect-via-idl-extended-attributes:reflect-3>reflect</a> <code id=using-reflect-via-idl-extended-attributes:xattr-reflect-2><a href=#xattr-reflect>[Reflect]</a></code>'s
  <a href=#reflected-content-attribute-name id=using-reflect-via-idl-extended-attributes:reflected-content-attribute-name-2>reflected content attribute name</a>.</p>

  <p>IDL attributes with the <code id=using-reflect-via-idl-extended-attributes:xattr-reflectsetter><a href=#xattr-reflectsetter>[ReflectSetter]</a></code>
  <a id=using-reflect-via-idl-extended-attributes:extended-attribute-4 href=https://webidl.spec.whatwg.org/#dfn-extended-attribute data-x-internal=extended-attribute>extended attribute</a> on setting must <a href=#reflect id=using-reflect-via-idl-extended-attributes:reflect-4>reflect</a> <code id=using-reflect-via-idl-extended-attributes:xattr-reflectsetter-2><a href=#xattr-reflectsetter>[ReflectSetter]</a></code>'s <a href=#reflected-content-attribute-name id=using-reflect-via-idl-extended-attributes:reflected-content-attribute-name-3>reflected content attribute
  name</a>.</p>

  <p>The <code id=using-reflect-via-idl-extended-attributes:xattr-reflecturl><a href=#xattr-reflecturl>[ReflectURL]</a></code> <a id=using-reflect-via-idl-extended-attributes:extended-attribute-5 href=https://webidl.spec.whatwg.org/#dfn-extended-attribute data-x-internal=extended-attribute>extended attribute</a> must
  only appear on attributes with a type of <code id=using-reflect-via-idl-extended-attributes:idl-usvstring><a data-x-internal=idl-usvstring href=https://webidl.spec.whatwg.org/#idl-USVString>USVString</a></code>.</p>

  <p>IDL attributes with the <code id=using-reflect-via-idl-extended-attributes:xattr-reflecturl-2><a href=#xattr-reflecturl>[ReflectURL]</a></code> <a id=using-reflect-via-idl-extended-attributes:extended-attribute-6 href=https://webidl.spec.whatwg.org/#dfn-extended-attribute data-x-internal=extended-attribute>extended
  attribute</a> must <a href=#reflect id=using-reflect-via-idl-extended-attributes:reflect-5>reflect</a>, <a href=#treated-as-a-url id=using-reflect-via-idl-extended-attributes:treated-as-a-url>as a URL</a>, <code id=using-reflect-via-idl-extended-attributes:xattr-reflecturl-3><a href=#xattr-reflecturl>[ReflectURL]</a></code>'s <a href=#reflected-content-attribute-name id=using-reflect-via-idl-extended-attributes:reflected-content-attribute-name-4>reflected content attribute name</a>.</p>

  <p>The <code id=using-reflect-via-idl-extended-attributes:xattr-reflectnonnegative><a href=#xattr-reflectnonnegative>[ReflectNonNegative]</a></code> <a id=using-reflect-via-idl-extended-attributes:extended-attribute-7 href=https://webidl.spec.whatwg.org/#dfn-extended-attribute data-x-internal=extended-attribute>extended
  attribute</a> must only appear on attributes with a type of <code id=using-reflect-via-idl-extended-attributes:idl-long><a data-x-internal=idl-long href=https://webidl.spec.whatwg.org/#idl-long>long</a></code>.</p>

  <p>IDL attributes with the <code id=using-reflect-via-idl-extended-attributes:xattr-reflectnonnegative-2><a href=#xattr-reflectnonnegative>[ReflectNonNegative]</a></code>
  <a id=using-reflect-via-idl-extended-attributes:extended-attribute-8 href=https://webidl.spec.whatwg.org/#dfn-extended-attribute data-x-internal=extended-attribute>extended attribute</a> must <a href=#reflect id=using-reflect-via-idl-extended-attributes:reflect-6>reflect</a>, <a href=#limited-to-only-non-negative-numbers id=using-reflect-via-idl-extended-attributes:limited-to-only-non-negative-numbers>limited to only non-negative
  numbers</a>, <code id=using-reflect-via-idl-extended-attributes:xattr-reflectnonnegative-3><a href=#xattr-reflectnonnegative>[ReflectNonNegative]</a></code>'s
  <a href=#reflected-content-attribute-name id=using-reflect-via-idl-extended-attributes:reflected-content-attribute-name-5>reflected content attribute name</a>.</p>

  <p>The <code id=using-reflect-via-idl-extended-attributes:xattr-reflectpositive><a href=#xattr-reflectpositive>[ReflectPositive]</a></code> and <code id=using-reflect-via-idl-extended-attributes:xattr-reflectpositivewithfallback><a href=#xattr-reflectpositivewithfallback>[ReflectPositiveWithFallback]</a></code> <a href=https://webidl.spec.whatwg.org/#dfn-extended-attribute id=using-reflect-via-idl-extended-attributes:extended-attribute-9 data-x-internal=extended-attribute>extended attributes</a> must only appear on attributes with a type
  of <code id=using-reflect-via-idl-extended-attributes:idl-double><a data-x-internal=idl-double href=https://webidl.spec.whatwg.org/#idl-double>double</a></code> or <code id=using-reflect-via-idl-extended-attributes:idl-unsigned-long><a data-x-internal=idl-unsigned-long href=https://webidl.spec.whatwg.org/#idl-unsigned-long>unsigned
  long</a></code>.</p>

  <p>IDL attributes with the <code id=using-reflect-via-idl-extended-attributes:xattr-reflectpositive-2><a href=#xattr-reflectpositive>[ReflectPositive]</a></code>
  <a id=using-reflect-via-idl-extended-attributes:extended-attribute-10 href=https://webidl.spec.whatwg.org/#dfn-extended-attribute data-x-internal=extended-attribute>extended attribute</a> must <a href=#reflect id=using-reflect-via-idl-extended-attributes:reflect-7>reflect</a>, <a href=#limited-to-only-non-negative-numbers-greater-than-zero id=using-reflect-via-idl-extended-attributes:limited-to-only-non-negative-numbers-greater-than-zero>limited to only positive
  numbers</a>, <code id=using-reflect-via-idl-extended-attributes:xattr-reflectpositive-3><a href=#xattr-reflectpositive>[ReflectPositive]</a></code>'s <a href=#reflected-content-attribute-name id=using-reflect-via-idl-extended-attributes:reflected-content-attribute-name-6>reflected
  content attribute name</a>.</p>

  <p>IDL attributes with the <code id=using-reflect-via-idl-extended-attributes:xattr-reflectpositivewithfallback-2><a href=#xattr-reflectpositivewithfallback>[ReflectPositiveWithFallback]</a></code> <a id=using-reflect-via-idl-extended-attributes:extended-attribute-11 href=https://webidl.spec.whatwg.org/#dfn-extended-attribute data-x-internal=extended-attribute>extended
  attribute</a> must <a href=#reflect id=using-reflect-via-idl-extended-attributes:reflect-8>reflect</a>, <a href=#limited-to-only-non-negative-numbers-greater-than-zero-with-fallback id=using-reflect-via-idl-extended-attributes:limited-to-only-non-negative-numbers-greater-than-zero-with-fallback>limited to only positive numbers with
  fallback</a>, <code id=using-reflect-via-idl-extended-attributes:xattr-reflectpositivewithfallback-3><a href=#xattr-reflectpositivewithfallback>[ReflectPositiveWithFallback]</a></code>'s <a href=#reflected-content-attribute-name id=using-reflect-via-idl-extended-attributes:reflected-content-attribute-name-7>reflected
  content attribute name</a>.</p>

  <hr>

  <p>To supplement the above <a href=https://webidl.spec.whatwg.org/#dfn-extended-attribute id=using-reflect-via-idl-extended-attributes:extended-attribute-12 data-x-internal=extended-attribute>extended attributes</a> we also
  introduce <dfn id=xattr-reflectrange data-dfn-type=extended-attribute data-lt=ReflectRange><code>[ReflectRange]</code></dfn>, and <dfn id=xattr-reflectdefault data-dfn-type=extended-attribute data-lt=ReflectDefault><code>[ReflectDefault]</code></dfn>. These
  augment how <a href=#reflect id=using-reflect-via-idl-extended-attributes:reflect-9>reflection</a> works and also must only appear on interface
  member attributes.</p>

  <p>The <code id=using-reflect-via-idl-extended-attributes:xattr-reflectrange><a href=#xattr-reflectrange>[ReflectRange]</a></code> <a id=using-reflect-via-idl-extended-attributes:extended-attribute-13 href=https://webidl.spec.whatwg.org/#dfn-extended-attribute data-x-internal=extended-attribute>extended attribute</a>
  must take an integer list limited to two values. It must only be used on attributes with a type of
  <code id=using-reflect-via-idl-extended-attributes:idl-unsigned-long-2><a data-x-internal=idl-unsigned-long href=https://webidl.spec.whatwg.org/#idl-unsigned-long>unsigned long</a></code>. Additionally, it must also only appear
  alongside <code id=using-reflect-via-idl-extended-attributes:xattr-reflect-3><a href=#xattr-reflect>[Reflect]</a></code>.</p>

  <p>IDL attributes with the <code id=using-reflect-via-idl-extended-attributes:xattr-reflectrange-2><a href=#xattr-reflectrange>[ReflectRange]</a></code> <a id=using-reflect-via-idl-extended-attributes:extended-attribute-14 href=https://webidl.spec.whatwg.org/#dfn-extended-attribute data-x-internal=extended-attribute>extended
  attribute</a> are <a href=#clamped-to-the-range id=using-reflect-via-idl-extended-attributes:clamped-to-the-range>clamped to the range</a> [<var>clampedMin</var>,
  <var>clampedMax</var>] where <var>clampedMin</var> is the first, and <var>clampedMax</var> is the
  second argument to the list provided to <code id=using-reflect-via-idl-extended-attributes:xattr-reflectrange-3><a href=#xattr-reflectrange>[ReflectRange]</a></code>.</p>

  <p>The <code id=using-reflect-via-idl-extended-attributes:xattr-reflectdefault><a href=#xattr-reflectdefault>[ReflectDefault]</a></code> <a id=using-reflect-via-idl-extended-attributes:extended-attribute-15 href=https://webidl.spec.whatwg.org/#dfn-extended-attribute data-x-internal=extended-attribute>extended attribute</a>
  must only be used on attributes with a type of <code id=using-reflect-via-idl-extended-attributes:idl-double-2><a data-x-internal=idl-double href=https://webidl.spec.whatwg.org/#idl-double>double</a></code>, <code id=using-reflect-via-idl-extended-attributes:idl-long-2><a data-x-internal=idl-long href=https://webidl.spec.whatwg.org/#idl-long>long</a></code>, or <code id=using-reflect-via-idl-extended-attributes:idl-unsigned-long-3><a data-x-internal=idl-unsigned-long href=https://webidl.spec.whatwg.org/#idl-unsigned-long>unsigned long</a></code>. When used
  on an attribute of type <code id=using-reflect-via-idl-extended-attributes:idl-double-3><a data-x-internal=idl-double href=https://webidl.spec.whatwg.org/#idl-double>double</a></code>, it must take a decimal; otherwise
  it must take an integer. Additionally, it must also only appear alongside <code id=using-reflect-via-idl-extended-attributes:xattr-reflect-4><a href=#xattr-reflect>[Reflect]</a></code>, <code id=using-reflect-via-idl-extended-attributes:xattr-reflectnonnegative-4><a href=#xattr-reflectnonnegative>[ReflectNonNegative]</a></code>, <code id=using-reflect-via-idl-extended-attributes:xattr-reflectpositive-4><a href=#xattr-reflectpositive>[ReflectPositive]</a></code>, or <code id=using-reflect-via-idl-extended-attributes:xattr-reflectpositivewithfallback-4><a href=#xattr-reflectpositivewithfallback>[ReflectPositiveWithFallback]</a></code>.</p>

  <p>IDL attributes with the <code id=using-reflect-via-idl-extended-attributes:xattr-reflectdefault-2><a href=#xattr-reflectdefault>[ReflectDefault]</a></code>
  <a id=using-reflect-via-idl-extended-attributes:extended-attribute-16 href=https://webidl.spec.whatwg.org/#dfn-extended-attribute data-x-internal=extended-attribute>extended attribute</a> have a <a href=#default-value id=using-reflect-via-idl-extended-attributes:default-value>default value</a> provided by the argument
  provided to <code id=using-reflect-via-idl-extended-attributes:xattr-reflectdefault-3><a href=#xattr-reflectdefault>[ReflectDefault]</a></code>.</p>

  <h4 id=using-reflect-in-specifications><span class=secno>2.6.3</span> Using reflect in specifications<a href=#using-reflect-in-specifications class=self-link></a></h4>

  <p><a href=#reflect id=using-reflect-in-specifications:reflect>Reflection</a> is primarily about improving web developer ergonomics
  by giving them typed access to content attributes through <a href=#reflected-idl-attribute id=using-reflect-in-specifications:reflected-idl-attribute>reflected IDL attributes</a>. The ultimate source of truth, which the web platform
  builds upon, is the content attributes themselves. That is, specification authors must not use the
  <a href=#reflected-idl-attribute id=using-reflect-in-specifications:reflected-idl-attribute-2>reflected IDL attribute</a> getter or setter steps, but instead must use the content
  attribute presence and value. (Or an abstraction on top, such as the state of an <a id=using-reflect-in-specifications:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated
  attribute</a>.)</p>

  <p>Two important exceptions to this are <a href=#reflected-idl-attribute id=using-reflect-in-specifications:reflected-idl-attribute-3>reflected IDL
  attributes</a> whose type is one of the following:</p>

  <ul><li><p><code><var>T</var>?</code>, where <var>T</var> is either <code id=using-reflect-in-specifications:element><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code> or
   an interface that inherits from <code id=using-reflect-in-specifications:element-2><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code><li><p><code>FrozenArray&lt;<var>T</var>>?</code>, where <var>T</var> is either
   <code id=using-reflect-in-specifications:element-3><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code> or an interface that inherits from <code id=using-reflect-in-specifications:element-4><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code></ul>

  <p>For those, specification authors must use the <a href=#reflected-target id=using-reflect-in-specifications:reflected-target>reflected target</a>'s
  <a href=#attr-associated-element id=using-reflect-in-specifications:attr-associated-element>get the <var>attr</var>-associated element</a> and <a href=#attr-associated-elements id=using-reflect-in-specifications:attr-associated-elements>get the
  <var>attr</var>-associated elements</a>, respectively. The content attribute presence and value
  must not be used as they cannot be fully synchronized with the <a href=#reflected-idl-attribute id=using-reflect-in-specifications:reflected-idl-attribute-4>reflected IDL
  attribute</a>.</p>

  <p>A <a href=#reflected-target id=using-reflect-in-specifications:reflected-target-2>reflected target</a>'s <a href=#explicitly-set-attr-element id=using-reflect-in-specifications:explicitly-set-attr-element>explicitly set <var>attr</var>-element</a>,
  <a href=#explicitly-set-attr-elements id=using-reflect-in-specifications:explicitly-set-attr-elements>explicitly set <var>attr</var>-elements</a>, <a href=#cached-attr-associated-elements id=using-reflect-in-specifications:cached-attr-associated-elements>cached <var>attr</var>-associated
  elements</a>, and <a href=#cached-attr-associated-elements-object id=using-reflect-in-specifications:cached-attr-associated-elements-object>cached <var>attr</var>-associated elements object</a> are to be
  treated as internal implementation details and not to be built upon.</p>

  

  <h4 id=collections><span class=secno>2.6.4</span> Collections<a href=#collections class=self-link></a></h4>

  <p>The <code id=collections:htmlformcontrolscollection><a href=#htmlformcontrolscollection>HTMLFormControlsCollection</a></code> and <code id=collections:htmloptionscollection><a href=#htmloptionscollection>HTMLOptionsCollection</a></code> interfaces
  are <a href=https://dom.spec.whatwg.org/#concept-collection id=collections:concept-collection data-x-internal=concept-collection>collections</a> derived from the
  <code id=collections:htmlcollection><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> interface. The <code id=collections:htmlallcollection><a href=#htmlallcollection>HTMLAllCollection</a></code> interface is a <a href=https://dom.spec.whatwg.org/#concept-collection id=collections:concept-collection-2 data-x-internal=concept-collection>collection</a>, but is not so derived.</p>


  <h5 id=the-htmlallcollection-interface><span class=secno>2.6.4.1</span> The <code id=the-htmlallcollection-interface:htmlallcollection><a href=#htmlallcollection>HTMLAllCollection</a></code> interface<a href=#the-htmlallcollection-interface class=self-link></a></h5>

  <p>The <code id=the-htmlallcollection-interface:htmlallcollection-2><a href=#htmlallcollection>HTMLAllCollection</a></code> interface is used for the legacy <code id=the-htmlallcollection-interface:dom-document-all><a href=obsolete.html#dom-document-all>document.all</a></code> attribute. It operates similarly to
  <code id=the-htmlallcollection-interface:htmlcollection><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code>; the main differences are that it allows a staggering variety of
  different (ab)uses of its methods to all end up returning something, and that it can be called as
  a function as an alternative to property access.</p>

  <p class=note>All <code id=the-htmlallcollection-interface:htmlallcollection-3><a href=#htmlallcollection>HTMLAllCollection</a></code> objects are rooted at a <code id=the-htmlallcollection-interface:document><a href=dom.html#document>Document</a></code>
  and have a filter that matches all elements, so the elements <a id=the-htmlallcollection-interface:represented-by-the-collection href=https://dom.spec.whatwg.org/#represented-by-the-collection data-x-internal=represented-by-the-collection>represented by the
  collection</a> of an <code id=the-htmlallcollection-interface:htmlallcollection-4><a href=#htmlallcollection>HTMLAllCollection</a></code> object consist of all the descendant
  elements of the root <code id=the-htmlallcollection-interface:document-2><a href=dom.html#document>Document</a></code>.</p>

  <p>Objects that implement the <code id=the-htmlallcollection-interface:htmlallcollection-5><a href=#htmlallcollection>HTMLAllCollection</a></code> interface are <a href=https://webidl.spec.whatwg.org/#dfn-legacy-platform-object id=the-htmlallcollection-interface:legacy-platform-object data-x-internal=legacy-platform-object>legacy platform objects</a> with an additional [[Call]] internal
  method described in the <a href=#HTMLAllCollection-call>section below</a>. They also have an
  <a id=the-htmlallcollection-interface:ishtmldda href=https://tc39.es/ecma262/#sec-IsHTMLDDA-internal-slot data-x-internal=ishtmldda>[[IsHTMLDDA]]</a> internal slot.</p>

  <div class=note>
   <p>Objects that implement the <code id=the-htmlallcollection-interface:htmlallcollection-6><a href=#htmlallcollection>HTMLAllCollection</a></code> interface have several unusual
   behaviors, due of the fact that they have an <a id=the-htmlallcollection-interface:ishtmldda-2 href=https://tc39.es/ecma262/#sec-IsHTMLDDA-internal-slot data-x-internal=ishtmldda>[[IsHTMLDDA]]</a> internal slot:</p>

   <ul><li><p>The <a href=https://tc39.es/ecma262/#sec-toboolean id=the-htmlallcollection-interface:js-toboolean data-x-internal=js-toboolean>ToBoolean</a> abstract operation in JavaScript returns
    false when given objects implementing the <code id=the-htmlallcollection-interface:htmlallcollection-7><a href=#htmlallcollection>HTMLAllCollection</a></code> interface.<li><p>The <a href=https://tc39.es/ecma262/#sec-islooselyequal id=the-htmlallcollection-interface:js-abstract-equality data-x-internal=js-abstract-equality>IsLooselyEqual</a> abstract operation,
    when given objects implementing the <code id=the-htmlallcollection-interface:htmlallcollection-8><a href=#htmlallcollection>HTMLAllCollection</a></code> interface, returns true when
    compared to the <code>undefined</code> and <code>null</code> values.
    (Comparisons using the <a href=https://tc39.es/ecma262/#sec-isstrictlyequal id=the-htmlallcollection-interface:js-strict-equality data-x-internal=js-strict-equality>IsStrictlyEqual</a> abstract
    operation, and IsLooselyEqual comparisons to other values such as strings or objects, are
    unaffected.)<li><p>The <code id=the-htmlallcollection-interface:js-typeof><a data-x-internal=js-typeof href=https://tc39.es/ecma262/#sec-typeof-operator>typeof</a></code> operator in JavaScript returns the string
    <code>"undefined"</code> when applied to objects implementing the
    <code id=the-htmlallcollection-interface:htmlallcollection-9><a href=#htmlallcollection>HTMLAllCollection</a></code> interface.</ul>

   <p>These special behaviors are motivated by a desire for compatibility with two classes of legacy
   content: one that uses the presence of <code id=the-htmlallcollection-interface:dom-document-all-2><a href=obsolete.html#dom-document-all>document.all</a></code> as a
   way to detect legacy user agents, and one that only supports those legacy user agents and uses
   the <code id=the-htmlallcollection-interface:dom-document-all-3><a href=obsolete.html#dom-document-all>document.all</a></code> object without testing for its presence
   first. <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a></p>
  </div>

  <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->,
 <a id='the-htmlallcollection-interface:legacyunenumerablenamedproperties' href='https://webidl.spec.whatwg.org/#LegacyUnenumerableNamedProperties' data-x-internal='legacyunenumerablenamedproperties'><c- g>LegacyUnenumerableNamedProperties</c-></a>]
<c- b>interface</c-> <dfn id='htmlallcollection' data-dfn-type='interface'><c- g>HTMLAllCollection</c-></dfn> {
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <a href='#dom-htmlallcollection-length' id='the-htmlallcollection-interface:dom-htmlallcollection-length'><c- g>length</c-></a>;
  <c- b>getter</c-> <a id='the-htmlallcollection-interface:element' href='https://dom.spec.whatwg.org/#interface-element' data-x-internal='element'><c- n>Element</c-></a> (<c- b>unsigned</c-> <c- b>long</c-> <c- g>index</c->);
  <c- b>getter</c-> (<a id='the-htmlallcollection-interface:htmlcollection-2' href='https://dom.spec.whatwg.org/#interface-htmlcollection' data-x-internal='htmlcollection'><c- n>HTMLCollection</c-></a> <c- b>or</c-> <a id='the-htmlallcollection-interface:element-2' href='https://dom.spec.whatwg.org/#interface-element' data-x-internal='element'><c- n>Element</c-></a>)? <a href='#dom-htmlallcollection-nameditem' id='the-htmlallcollection-interface:dom-htmlallcollection-nameditem'><c- g>namedItem</c-></a>(<c- b>DOMString</c-> <c- g>name</c->);
  (<a id='the-htmlallcollection-interface:htmlcollection-3' href='https://dom.spec.whatwg.org/#interface-htmlcollection' data-x-internal='htmlcollection'><c- n>HTMLCollection</c-></a> <c- b>or</c-> <a id='the-htmlallcollection-interface:element-3' href='https://dom.spec.whatwg.org/#interface-element' data-x-internal='element'><c- n>Element</c-></a>)? <a href='#dom-htmlallcollection-item' id='the-htmlallcollection-interface:dom-htmlallcollection-item'><c- g>item</c-></a>(<c- b>optional</c-> <c- b>DOMString</c-> <c- g>nameOrIndex</c->);

  // Note: HTMLAllCollection objects have a <a href='#HTMLAllCollection-call'>custom [[Call]] internal method</a> and an <a id='the-htmlallcollection-interface:ishtmldda-3' href='https://tc39.es/ecma262/#sec-IsHTMLDDA-internal-slot' data-x-internal='ishtmldda'>[[IsHTMLDDA]]</a> internal slot.
};</code></pre>

  

  <p>The object's <a id=the-htmlallcollection-interface:supported-property-indices href=https://webidl.spec.whatwg.org/#dfn-supported-property-indices data-x-internal=supported-property-indices>supported property indices</a> are as defined for
  <code id=the-htmlallcollection-interface:htmlcollection-4><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> objects.</p>

  <p>The <a id=the-htmlallcollection-interface:supported-property-names href=https://webidl.spec.whatwg.org/#dfn-supported-property-names data-x-internal=supported-property-names>supported property names</a> consist of the non-empty values of all the <code id=the-htmlallcollection-interface:the-id-attribute><a href=dom.html#the-id-attribute>id</a></code> attributes of all the elements <a id=the-htmlallcollection-interface:represented-by-the-collection-2 href=https://dom.spec.whatwg.org/#represented-by-the-collection data-x-internal=represented-by-the-collection>represented by the
  collection</a>, and the non-empty values of all the <code>name</code> attributes of
  all the <a href=#all-named-elements id=the-htmlallcollection-interface:all-named-elements>"all"-named elements</a> <a id=the-htmlallcollection-interface:represented-by-the-collection-3 href=https://dom.spec.whatwg.org/#represented-by-the-collection data-x-internal=represented-by-the-collection>represented by the collection</a>, in
  <a id=the-htmlallcollection-interface:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>, ignoring later duplicates, with the <code id=the-htmlallcollection-interface:the-id-attribute-2><a href=dom.html#the-id-attribute>id</a></code> of
  an element preceding its <code>name</code> if it contributes both, they differ from
  each other, and neither is the duplicate of an earlier entry.</p>

  <p>The <dfn data-dfn-for=HTMLAllCollection id=dom-htmlallcollection-length data-dfn-type=attribute><code>length</code></dfn> getter steps are to return the number
  of nodes <a id=the-htmlallcollection-interface:represented-by-the-collection-4 href=https://dom.spec.whatwg.org/#represented-by-the-collection data-x-internal=represented-by-the-collection>represented by the collection</a>.</p>

  <p>The indexed property getter must return the result of <a href=#concept-get-all-indexed id=the-htmlallcollection-interface:concept-get-all-indexed>getting the "all"-indexed element</a> from <a id=the-htmlallcollection-interface:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>
  given the passed index.</p>

  <p>The <dfn data-dfn-for=HTMLAllCollection id=dom-htmlallcollection-nameditem data-dfn-type=method><code>namedItem(<var>name</var>)</code></dfn> method steps are
  to return the result of <a href=#concept-get-all-named id=the-htmlallcollection-interface:concept-get-all-named>getting the "all"-named
  element(s)</a> from <a id=the-htmlallcollection-interface:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> given <var>name</var>.</p>

  <p>The <dfn data-dfn-for=HTMLAllCollection id=dom-htmlallcollection-item data-dfn-type=method><code>item(<var>nameOrIndex</var>)</code></dfn> method steps
  are:</p>

  <ol><li><p>If <var>nameOrIndex</var> was not provided, return null.<li><p>Return the result of <a href=#concept-get-all-indexed-or-named id=the-htmlallcollection-interface:concept-get-all-indexed-or-named>getting the
   "all"-indexed or named element(s)</a> from <a id=the-htmlallcollection-interface:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>, given
   <var>nameOrIndex</var>.</ol>

  <hr>

  
  <p>The following elements are <dfn id=all-named-elements>"all"-named elements</dfn>:
   <code id=the-htmlallcollection-interface:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code>,
   <code id=the-htmlallcollection-interface:the-button-element><a href=form-elements.html#the-button-element>button</a></code>,
   <code id=the-htmlallcollection-interface:the-embed-element><a href=iframe-embed-object.html#the-embed-element>embed</a></code>,
   <code id=the-htmlallcollection-interface:the-form-element><a href=forms.html#the-form-element>form</a></code>,
   <code id=the-htmlallcollection-interface:frame><a href=obsolete.html#frame>frame</a></code>,
   <code id=the-htmlallcollection-interface:frameset><a href=obsolete.html#frameset>frameset</a></code>,
   <code id=the-htmlallcollection-interface:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code>,
   <code id=the-htmlallcollection-interface:the-img-element><a href=embedded-content.html#the-img-element>img</a></code>,
   <code id=the-htmlallcollection-interface:the-input-element><a href=input.html#the-input-element>input</a></code>,
   <code id=the-htmlallcollection-interface:the-map-element><a href=image-maps.html#the-map-element>map</a></code>,
   <code id=the-htmlallcollection-interface:the-meta-element><a href=semantics.html#the-meta-element>meta</a></code>,
   <code id=the-htmlallcollection-interface:the-object-element><a href=iframe-embed-object.html#the-object-element>object</a></code>,
   <code id=the-htmlallcollection-interface:the-select-element><a href=form-elements.html#the-select-element>select</a></code>, and
   <code id=the-htmlallcollection-interface:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code>
  </p>

  <p>To <dfn id=concept-get-all-indexed>get the "all"-indexed element</dfn> from an
  <code id=the-htmlallcollection-interface:htmlallcollection-10><a href=#htmlallcollection>HTMLAllCollection</a></code> <var>collection</var> given an index <var>index</var>, return the
  <var>index</var><sup>th</sup> element in <var>collection</var>, or null if there is no such
  <var>index</var><sup>th</sup> element.</p>

  <p>To <dfn id=concept-get-all-named>get the "all"-named element(s)</dfn> from an
  <code id=the-htmlallcollection-interface:htmlallcollection-11><a href=#htmlallcollection>HTMLAllCollection</a></code> <var>collection</var> given a name <var>name</var>, perform the
  following steps:</p>

  <ol><li><p>If <var>name</var> is the empty string, return null.<li>
    <p>Let <var>subCollection</var> be an <code id=the-htmlallcollection-interface:htmlcollection-5><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> object rooted at the same
    <code id=the-htmlallcollection-interface:document-3><a href=dom.html#document>Document</a></code> as <var>collection</var>, whose filter matches only elements that are
    either:</p>

    <ul><li><p><a href=#all-named-elements id=the-htmlallcollection-interface:all-named-elements-2>"all"-named elements</a> with a <code>name</code> attribute equal to
     <var>name</var>, or<li><p>elements with an <a href=https://dom.spec.whatwg.org/#concept-id id=the-htmlallcollection-interface:concept-id data-x-internal=concept-id>ID</a> equal to <var>name</var>.</ul>
   <li><p>If there is exactly one element in <var>subCollection</var>, then return that
   element.<li><p>Otherwise, if <var>subCollection</var> is empty, return null.<li><p>Otherwise, return <var>subCollection</var>.</ol>

  <p>To <dfn id=concept-get-all-indexed-or-named>get the "all"-indexed or named
  element(s)</dfn> from an <code id=the-htmlallcollection-interface:htmlallcollection-12><a href=#htmlallcollection>HTMLAllCollection</a></code> <var>collection</var> given
  <var>nameOrIndex</var>:

  <ol><li><p>If <var>nameOrIndex</var>, <a href=https://webidl.spec.whatwg.org/#es-type-mapping id=the-htmlallcollection-interface:concept-idl-convert data-x-internal=concept-idl-convert>converted</a> to a
   JavaScript String value, is an <a id=the-htmlallcollection-interface:array-index-property-name href=https://webidl.spec.whatwg.org/#dfn-array-index-property-name data-x-internal=array-index-property-name>array index property name</a>, return the result of <a href=#concept-get-all-indexed id=the-htmlallcollection-interface:concept-get-all-indexed-2>getting the "all"-indexed element</a> from
   <var>collection</var> given the number represented by <var>nameOrIndex</var>.<li><p>Return the result of <a href=#concept-get-all-named id=the-htmlallcollection-interface:concept-get-all-named-2>getting the "all"-named
   element(s)</a> from <var>collection</var> given <var>nameOrIndex</var>.</ol>

  <h6 id=HTMLAllCollection-call><span class=secno>2.6.4.1.1</span> [[Call]] ( <var>thisArgument</var>, <var>argumentsList</var> )<a href=#HTMLAllCollection-call class=self-link></a></h6>

  <ol><li><p>If <var>argumentsList</var>'s <a href=https://infra.spec.whatwg.org/#list-size id=HTMLAllCollection-call:list-size data-x-internal=list-size>size</a> is zero, or if
   <var>argumentsList</var>[0] is undefined, return null.<li><p>Let <var>nameOrIndex</var> be the result of <a href=https://webidl.spec.whatwg.org/#es-type-mapping id=HTMLAllCollection-call:concept-idl-convert data-x-internal=concept-idl-convert>converting</a> <var>argumentsList</var>[0] to a <code id=HTMLAllCollection-call:idl-domstring><a data-x-internal=idl-domstring href=https://webidl.spec.whatwg.org/#idl-DOMString>DOMString</a></code>.<li><p>Let <var>result</var> be the result of <a href=#concept-get-all-indexed-or-named id=HTMLAllCollection-call:concept-get-all-indexed-or-named>getting the "all"-indexed or named element(s)</a>
   from this <code id=HTMLAllCollection-call:htmlallcollection><a href=#htmlallcollection>HTMLAllCollection</a></code> given <var>nameOrIndex</var>.<li><p>Return the result of <a href=https://webidl.spec.whatwg.org/#es-type-mapping id=HTMLAllCollection-call:concept-idl-convert-2 data-x-internal=concept-idl-convert>converting</a>
   <var>result</var> to an ECMAScript value.</ol>

  <p class=note>The <var>thisArgument</var> is ignored, and thus code such as <code>Function.prototype.call.call(document.all, null, "x")</code> will still search for
  elements. (<code>document.all.call</code> does not exist, since <code>document.all</code> does not inherit from <code>Function.prototype</code>.)</p>

  


  <h5 id=the-htmlformcontrolscollection-interface><span class=secno>2.6.4.2</span> The <code id=the-htmlformcontrolscollection-interface:htmlformcontrolscollection><a href=#htmlformcontrolscollection>HTMLFormControlsCollection</a></code> interface<a href=#the-htmlformcontrolscollection-interface class=self-link></a></h5>

  <p>The <code id=the-htmlformcontrolscollection-interface:htmlformcontrolscollection-2><a href=#htmlformcontrolscollection>HTMLFormControlsCollection</a></code> interface is used for
  <a href=https://dom.spec.whatwg.org/#concept-collection id=the-htmlformcontrolscollection-interface:concept-collection data-x-internal=concept-collection>collections</a> of <a href=forms.html#category-listed id=the-htmlformcontrolscollection-interface:category-listed>listed
  elements</a> in <code id=the-htmlformcontrolscollection-interface:the-form-element><a href=forms.html#the-form-element>form</a></code> elements.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormControlsCollection title="The HTMLFormControlsCollection interface represents a collection of HTML form control elements, returned by the HTMLFormElement interface's elements property.">HTMLFormControlsCollection</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/RadioNodeList title="The RadioNodeList interface represents a collection of radio elements in a <form> or a <fieldset> element.">RadioNodeList</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span>21+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmlformcontrolscollection' data-dfn-type='interface'><c- g>HTMLFormControlsCollection</c-></dfn> : <a id='the-htmlformcontrolscollection-interface:htmlcollection' href='https://dom.spec.whatwg.org/#interface-htmlcollection' data-x-internal='htmlcollection'><c- n>HTMLCollection</c-></a> {
  // inherits <a href='https://dom.spec.whatwg.org/#dom-htmlcollection-length' id='the-htmlformcontrolscollection-interface:dom-htmlcollection-length' data-x-internal='dom-htmlcollection-length'>length</a> and <a href='https://dom.spec.whatwg.org/#dom-htmlcollection-item' id='the-htmlformcontrolscollection-interface:dom-htmlcollection-item' data-x-internal='dom-htmlcollection-item'>item</a>()
  <c- b>getter</c-> (<a href='#radionodelist' id='the-htmlformcontrolscollection-interface:radionodelist'><c- n>RadioNodeList</c-></a> <c- b>or</c-> <a id='the-htmlformcontrolscollection-interface:element' href='https://dom.spec.whatwg.org/#interface-element' data-x-internal='element'><c- n>Element</c-></a>)? <a href='#dom-htmlformcontrolscollection-nameditem' id='the-htmlformcontrolscollection-interface:dom-htmlformcontrolscollection-nameditem'><c- g>namedItem</c-></a>(<c- b>DOMString</c-> <c- g>name</c->); // shadows inherited <a href='https://dom.spec.whatwg.org/#dom-htmlcollection-nameditem' id='the-htmlformcontrolscollection-interface:dom-htmlcollection-nameditem' data-x-internal='dom-htmlcollection-nameditem'>namedItem()</a>
};

[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='radionodelist' data-dfn-type='interface'><c- g>RadioNodeList</c-></dfn> : <a id='the-htmlformcontrolscollection-interface:nodelist' href='https://dom.spec.whatwg.org/#interface-nodelist' data-x-internal='nodelist'><c- n>NodeList</c-></a> {
  <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-radionodelist-value' id='the-htmlformcontrolscollection-interface:dom-radionodelist-value'><c- g>value</c-></a>;
};</code></pre>

  <dl class=domintro><dt><code><var>collection</var>.<a href=https://dom.spec.whatwg.org/#dom-htmlcollection-length id=dom-htmlcollection-length-dev data-x-internal=dom-htmlcollection-length>length</a></code><dd><p>Returns the number of elements in <var>collection</var>.<dt><code><var>element</var> = <var>collection</var>.<a href=https://dom.spec.whatwg.org/#dom-htmlcollection-item id=dom-htmlcollection-item-dev data-x-internal=dom-htmlcollection-item>item</a>(<var>index</var>)</code><dt><code><var>element</var> = <var>collection</var>[<var>index</var>]</code><dd><p>Returns the item at index <var>index</var> in <var>collection</var>. The items are sorted
   in <a id=the-htmlformcontrolscollection-interface:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>.<dt><code><var>element</var> = <var>collection</var>.<a href=#dom-htmlformcontrolscollection-nameditem id=dom-htmlformcontrolscollection-nameditem-dev>namedItem</a>(<var>name</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormControlsCollection/namedItem title="The HTMLFormControlsCollection.namedItem() method returns the RadioNodeList or the Element in the collection whose name or id match the specified name, or null if no node matches.">HTMLFormControlsCollection/namedItem</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>33+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dt><code><var>radioNodeList</var> = <var>collection</var>.<a href=#dom-htmlformcontrolscollection-nameditem id=the-htmlformcontrolscollection-interface:dom-htmlformcontrolscollection-nameditem-2>namedItem</a>(<var>name</var>)</code><dt><code><var>element</var> = <var>collection</var>[<var>name</var>]</code><dt><code><var>radioNodeList</var> = <var>collection</var>[<var>name</var>]</code><dd>
    <p>Returns the item with <a href=https://dom.spec.whatwg.org/#concept-id id=the-htmlformcontrolscollection-interface:concept-id data-x-internal=concept-id>ID</a> or <code id=the-htmlformcontrolscollection-interface:attr-fe-name><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> <var>name</var> from <var>collection</var>.</p>

    <p>If there are multiple matching items, then a <code id=the-htmlformcontrolscollection-interface:radionodelist-2><a href=#radionodelist>RadioNodeList</a></code> object containing all
    those elements is returned.</p>
   <dt><code><var>radioNodeList</var>.<a href=#dom-radionodelist-value id=dom-radionodelist-value-dev>value</a></code><dd><p>Returns the value of the first checked radio button represented by
   <var>radioNodeList</var>.<dt><code><var>radioNodeList</var>.<a href=#dom-radionodelist-value id=the-htmlformcontrolscollection-interface:dom-radionodelist-value-2>value</a> = <var>value</var></code><dd><p>Checks the first radio button represented by <var>radioNodeList</var> that has value
   <var>value</var>.</dl>

  

  <p>The object's <a id=the-htmlformcontrolscollection-interface:supported-property-indices href=https://webidl.spec.whatwg.org/#dfn-supported-property-indices data-x-internal=supported-property-indices>supported property indices</a> are as defined for
  <code id=the-htmlformcontrolscollection-interface:htmlcollection-2><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> objects.</p>

  <p>The <a id=the-htmlformcontrolscollection-interface:supported-property-names href=https://webidl.spec.whatwg.org/#dfn-supported-property-names data-x-internal=supported-property-names>supported property names</a> consist of the non-empty values of all the <code id=the-htmlformcontrolscollection-interface:the-id-attribute><a href=dom.html#the-id-attribute>id</a></code> and <code id=the-htmlformcontrolscollection-interface:attr-fe-name-2><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attributes of all the
  elements <a id=the-htmlformcontrolscollection-interface:represented-by-the-collection href=https://dom.spec.whatwg.org/#represented-by-the-collection data-x-internal=represented-by-the-collection>represented by the collection</a>, in <a id=the-htmlformcontrolscollection-interface:tree-order-2 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>, ignoring later
  duplicates, with the <code id=the-htmlformcontrolscollection-interface:the-id-attribute-2><a href=dom.html#the-id-attribute>id</a></code> of an element preceding its <code id=the-htmlformcontrolscollection-interface:attr-fe-name-3><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> if it contributes both, they differ from each other, and neither is the
  duplicate of an earlier entry.</p>

  <p>The <dfn data-dfn-for=HTMLFormControlsCollection id=dom-htmlformcontrolscollection-nameditem data-dfn-type=method><code>namedItem(<var>name</var>)</code></dfn> method
  must act according to the following algorithm:</p>

  <ol><li>If <var>name</var> is the empty string, return null and stop the algorithm.<li>If, at the time the method is called, there is exactly one node in the collection that has
   either an <code id=the-htmlformcontrolscollection-interface:the-id-attribute-3><a href=dom.html#the-id-attribute>id</a></code> attribute or a <code id=the-htmlformcontrolscollection-interface:attr-fe-name-4><a href=form-control-infrastructure.html#attr-fe-name>name</a></code>
   attribute equal to <var>name</var>, then return that node and stop the algorithm.<li>Otherwise, if there are no nodes in the collection that have either an <code id=the-htmlformcontrolscollection-interface:the-id-attribute-4><a href=dom.html#the-id-attribute>id</a></code> attribute or a <code id=the-htmlformcontrolscollection-interface:attr-fe-name-5><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute equal
   to <var>name</var>, then return null and stop the algorithm.<li>Otherwise, create a new <code id=the-htmlformcontrolscollection-interface:radionodelist-3><a href=#radionodelist>RadioNodeList</a></code> object representing a <a id=the-htmlformcontrolscollection-interface:live href=infrastructure.html#live>live</a>
   view of the <code id=the-htmlformcontrolscollection-interface:htmlformcontrolscollection-3><a href=#htmlformcontrolscollection>HTMLFormControlsCollection</a></code> object, further filtered so that the only
   nodes in the <code id=the-htmlformcontrolscollection-interface:radionodelist-4><a href=#radionodelist>RadioNodeList</a></code> object are those that have either an <code id=the-htmlformcontrolscollection-interface:the-id-attribute-5><a href=dom.html#the-id-attribute>id</a></code> attribute or a <code id=the-htmlformcontrolscollection-interface:attr-fe-name-6><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute equal
   to <var>name</var>. The nodes in the <code id=the-htmlformcontrolscollection-interface:radionodelist-5><a href=#radionodelist>RadioNodeList</a></code> object must be sorted in
   <a id=the-htmlformcontrolscollection-interface:tree-order-3 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>.<li>Return that <code id=the-htmlformcontrolscollection-interface:radionodelist-6><a href=#radionodelist>RadioNodeList</a></code> object.</ol>

  <hr>

  <p>Members of the <code id=the-htmlformcontrolscollection-interface:radionodelist-7><a href=#radionodelist>RadioNodeList</a></code> interface inherited from the <code id=the-htmlformcontrolscollection-interface:nodelist-2><a data-x-internal=nodelist href=https://dom.spec.whatwg.org/#interface-nodelist>NodeList</a></code>
  interface must behave as they would on a <code id=the-htmlformcontrolscollection-interface:nodelist-3><a data-x-internal=nodelist href=https://dom.spec.whatwg.org/#interface-nodelist>NodeList</a></code> object.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/RadioNodeList/value title="If the underlying element collection contains radio buttons, the RadioNodeList.value property represents the checked radio button. On retrieving the value property, the value of the currently checked radio button is returned as a string. If the collection does not contain any radio buttons or none of the radio buttons in the collection is in checked state, the empty string is returned. On setting the value property, the first radio button input element whose value property is equal to the new value will be set to checked.">RadioNodeList/value</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span>21+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=RadioNodeList id=dom-radionodelist-value data-dfn-type=attribute><code>value</code></dfn> IDL attribute on the
  <code id=the-htmlformcontrolscollection-interface:radionodelist-8><a href=#radionodelist>RadioNodeList</a></code> object, on getting, must return the value returned by running the
  following steps:</p>

  <ol><li><p>Let <var>element</var> be the first element in <a id=the-htmlformcontrolscollection-interface:tree-order-4 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>
   represented by the <code id=the-htmlformcontrolscollection-interface:radionodelist-9><a href=#radionodelist>RadioNodeList</a></code> object that is an <code id=the-htmlformcontrolscollection-interface:the-input-element><a href=input.html#the-input-element>input</a></code> element whose
   <code id=the-htmlformcontrolscollection-interface:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#radio-button-state-(type=radio)" id="the-htmlformcontrolscollection-interface:radio-button-state-(type=radio)">Radio Button</a> state and whose <a href=form-control-infrastructure.html#concept-fe-checked id=the-htmlformcontrolscollection-interface:concept-fe-checked>checkedness</a> is true. Otherwise, let it be null.<li><p>If <var>element</var> is null, return the empty string.<li><p>If <var>element</var> is an element with no <code id=the-htmlformcontrolscollection-interface:attr-input-value><a href=input.html#attr-input-value>value</a></code> attribute, return the string "<code>on</code>".<li><p>Otherwise, return the value of <var>element</var>'s <code id=the-htmlformcontrolscollection-interface:attr-input-value-2><a href=input.html#attr-input-value>value</a></code> attribute.</ol>

  <p>On setting, the <code id=the-htmlformcontrolscollection-interface:dom-radionodelist-value-3><a href=#dom-radionodelist-value>value</a></code> IDL attribute must run the
  following steps:</p>

  <ol><li><p>If the new value is the string "<code>on</code>": let <var>element</var> be the first element in <a id=the-htmlformcontrolscollection-interface:tree-order-5 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>
   represented by the <code id=the-htmlformcontrolscollection-interface:radionodelist-10><a href=#radionodelist>RadioNodeList</a></code> object that is an <code id=the-htmlformcontrolscollection-interface:the-input-element-2><a href=input.html#the-input-element>input</a></code> element whose
   <code id=the-htmlformcontrolscollection-interface:attr-input-type-2><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#radio-button-state-(type=radio)" id="the-htmlformcontrolscollection-interface:radio-button-state-(type=radio)-2">Radio Button</a> state and whose <code id=the-htmlformcontrolscollection-interface:attr-input-value-3><a href=input.html#attr-input-value>value</a></code> content attribute is either absent, or present and equal to the new value, if any. If no such element exists, then instead let <var>element</var> be null.</p>

   <p>Otherwise: let <var>element</var> be the first element in <a id=the-htmlformcontrolscollection-interface:tree-order-6 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>
   represented by the <code id=the-htmlformcontrolscollection-interface:radionodelist-11><a href=#radionodelist>RadioNodeList</a></code> object that is an <code id=the-htmlformcontrolscollection-interface:the-input-element-3><a href=input.html#the-input-element>input</a></code> element whose
   <code id=the-htmlformcontrolscollection-interface:attr-input-type-3><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#radio-button-state-(type=radio)" id="the-htmlformcontrolscollection-interface:radio-button-state-(type=radio)-3">Radio Button</a> state and whose <code id=the-htmlformcontrolscollection-interface:attr-input-value-4><a href=input.html#attr-input-value>value</a></code> content attribute is present and equal to the new value, if
   any. If no such element exists, then instead let <var>element</var> be null.<li><p>If <var>element</var> is not null, then set its <a href=form-control-infrastructure.html#concept-fe-checked id=the-htmlformcontrolscollection-interface:concept-fe-checked-2>checkedness</a> to true.</p>
  </ol>



  


  <h5 id=the-htmloptionscollection-interface><span class=secno>2.6.4.3</span> The <code id=the-htmloptionscollection-interface:htmloptionscollection><a href=#htmloptionscollection>HTMLOptionsCollection</a></code> interface<a href=#the-htmloptionscollection-interface class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionsCollection title="The HTMLOptionsCollection interface represents a collection of <option> HTML elements (in document order) and offers methods and properties for selecting from the list as well as optionally altering its items. This object is returned only by the options property of select.">HTMLOptionsCollection</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>6+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <p>The <code id=the-htmloptionscollection-interface:htmloptionscollection-2><a href=#htmloptionscollection>HTMLOptionsCollection</a></code> interface is used for <a href=https://dom.spec.whatwg.org/#concept-collection id=the-htmloptionscollection-interface:concept-collection data-x-internal=concept-collection>collections</a> of <code id=the-htmloptionscollection-interface:the-option-element><a href=form-elements.html#the-option-element>option</a></code> elements. It is always
  rooted on a <code id=the-htmloptionscollection-interface:the-select-element><a href=form-elements.html#the-select-element>select</a></code> element and has attributes and methods that manipulate that
  element's descendants.</p>

  <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmloptionscollection' data-dfn-type='interface'><c- g>HTMLOptionsCollection</c-></dfn> : <a id='the-htmloptionscollection-interface:htmlcollection' href='https://dom.spec.whatwg.org/#interface-htmlcollection' data-x-internal='htmlcollection'><c- n>HTMLCollection</c-></a> {
  // inherits <a href='https://dom.spec.whatwg.org/#dom-htmlcollection-item' id='the-htmloptionscollection-interface:dom-htmlcollection-item' data-x-internal='dom-htmlcollection-item'>item</a>(), <a href='https://dom.spec.whatwg.org/#dom-htmlcollection-nameditem' id='the-htmloptionscollection-interface:dom-htmlcollection-nameditem' data-x-internal='dom-htmlcollection-nameditem'>namedItem</a>()
  [<a id='the-htmloptionscollection-interface:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <a href='#dom-htmloptionscollection-length' id='the-htmloptionscollection-interface:dom-htmloptionscollection-length'><c- g>length</c-></a>; // shadows inherited <a href='https://dom.spec.whatwg.org/#dom-htmlcollection-length' id='the-htmloptionscollection-interface:dom-htmlcollection-length' data-x-internal='dom-htmlcollection-length'>length</a>
  [<a id='the-htmloptionscollection-interface:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <a href='#dom-htmloptionscollection-setter'><c- b>setter</c-></a> <c- b>undefined</c-> (<c- b>unsigned</c-> <c- b>long</c-> <c- g>index</c->, <a id='the-htmloptionscollection-interface:htmloptionelement' href='form-elements.html#htmloptionelement'><c- n>HTMLOptionElement</c-></a>? <c- g>option</c->);
  [<a id='the-htmloptionscollection-interface:cereactions-3' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>undefined</c-> <a href='#dom-htmloptionscollection-add' id='the-htmloptionscollection-interface:dom-htmloptionscollection-add'><c- g>add</c-></a>((<a id='the-htmloptionscollection-interface:htmloptionelement-2' href='form-elements.html#htmloptionelement'><c- n>HTMLOptionElement</c-></a> <c- b>or</c-> <a id='the-htmloptionscollection-interface:htmloptgroupelement' href='form-elements.html#htmloptgroupelement'><c- n>HTMLOptGroupElement</c-></a>) <c- g>element</c->, <c- b>optional</c-> (<a id='the-htmloptionscollection-interface:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> <c- b>or</c-> <c- b>long</c->)? <c- g>before</c-> = <c- b>null</c->);
  [<a id='the-htmloptionscollection-interface:cereactions-4' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>undefined</c-> <a href='#dom-htmloptionscollection-remove' id='the-htmloptionscollection-interface:dom-htmloptionscollection-remove'><c- g>remove</c-></a>(<c- b>long</c-> <c- g>index</c->);
  <c- b>attribute</c-> <c- b>long</c-> <a href='#dom-htmloptionscollection-selectedindex' id='the-htmloptionscollection-interface:dom-htmloptionscollection-selectedindex'><c- g>selectedIndex</c-></a>;
};</code></pre>

  <dl class=domintro><dt><code><var>collection</var>.<a href=#dom-htmloptionscollection-length id=dom-htmloptionscollection-length-dev>length</a></code><dd><p>Returns the number of elements in <var>collection</var>.<dt><code><var>collection</var>.<a href=#dom-htmloptionscollection-length id=the-htmloptionscollection-interface:dom-htmloptionscollection-length-2>length</a> = <var>value</var></code><dd>
    <p>When set to a smaller number than the existing length, truncates the number of
    <code id=the-htmloptionscollection-interface:the-option-element-2><a href=form-elements.html#the-option-element>option</a></code> elements in the container corresponding to <var>collection</var>.</p>

    <p>When set to a greater number than the existing length, if that number is less than or equal
    to 100000, adds new blank <code id=the-htmloptionscollection-interface:the-option-element-3><a href=form-elements.html#the-option-element>option</a></code> elements to the container corresponding to
    <var>collection</var>.</p>
   <dt><code><var>element</var> = <var>collection</var>.<a href=https://dom.spec.whatwg.org/#dom-htmlcollection-item id=the-htmloptionscollection-interface:dom-htmlcollection-item-2 data-x-internal=dom-htmlcollection-item>item</a>(<var>index</var>)</code><dt><code><var>element</var> = <var>collection</var>[<var>index</var>]</code><dd><p>Returns the item at index <var>index</var> in <var>collection</var>. The items are sorted
   in <a id=the-htmloptionscollection-interface:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>.<dt><code><var>collection</var>[<var>index</var>] = <var>element</var></code><dd>
    <p>When <var>index</var> is a greater number than the number of items in <var>collection</var>,
    adds new blank <code id=the-htmloptionscollection-interface:the-option-element-4><a href=form-elements.html#the-option-element>option</a></code> elements in the corresponding container.</p>

    <p>When set to null, removes the item at index <var>index</var> from <var>collection</var>.</p>

    <p>When set to an <code id=the-htmloptionscollection-interface:the-option-element-5><a href=form-elements.html#the-option-element>option</a></code> element, adds or replaces it at index <var>index</var> in
    <var>collection</var>.</p>
   <dt><code><var>element</var> = <var>collection</var>.<a href=https://dom.spec.whatwg.org/#dom-htmlcollection-nameditem id=dom-htmlcollection-nameditem-dev data-x-internal=dom-htmlcollection-nameditem>namedItem</a>(<var>name</var>)</code><dt><code><var>element</var> = <var>collection</var>[<var>name</var>]</code><dd>
    <p>Returns the item with <a href=https://dom.spec.whatwg.org/#concept-id id=the-htmloptionscollection-interface:concept-id data-x-internal=concept-id>ID</a> or <code id=the-htmloptionscollection-interface:attr-option-name><a href=obsolete.html#attr-option-name>name</a></code> <var>name</var> from <var>collection</var>.</p>

    <p>If there are multiple matching items, then the first is returned.</p>
   <dt><code><var>collection</var>.<a href=#dom-htmloptionscollection-add id=dom-htmloptionscollection-add-dev>add</a>(<var>element</var>[, <var>before</var>])</code><dd>
    <p>Inserts <var>element</var> before the node given by <var>before</var>.</p>

    <p>The <var>before</var> argument can be a number, in which case <var>element</var> is inserted
    before the item with that number, or an element from <var>collection</var>, in which case
    <var>element</var> is inserted before that element.</p>

    <p>If <var>before</var> is omitted, null, or a number out of range, then <var>element</var> will
    be added at the end of the list.</p>

    <p>Throws a <a id=the-htmloptionscollection-interface:hierarchyrequesterror href=https://webidl.spec.whatwg.org/#hierarchyrequesterror data-x-internal=hierarchyrequesterror>"<code>HierarchyRequestError</code>"</a> <code id=the-htmloptionscollection-interface:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if
    <var>element</var> is an ancestor of the element into which it is to be inserted.</p>
   <dt><code><var>collection</var>.<a href=#dom-htmloptionscollection-remove id=dom-htmloptionscollection-remove-dev>remove</a>(<var>index</var>)</code><dd><p>Removes the item with index <var>index</var> from <var>collection</var>.<dt><code><var>collection</var>.<a href=#dom-htmloptionscollection-selectedindex id=the-htmloptionscollection-interface:dom-htmloptionscollection-selectedindex-2>selectedIndex</a></code><dd><p>Returns the index of the first selected item, if any, or −1 if there is no selected
   item.<dt><code><var>collection</var>.<a href=#dom-htmloptionscollection-selectedindex id=dom-htmloptionscollection-selectedindex-dev>selectedIndex</a> = <var>index</var></code><dd><p>Changes the selection to the <code id=the-htmloptionscollection-interface:the-option-element-6><a href=form-elements.html#the-option-element>option</a></code> element at index <var>index</var> in
   <var>collection</var>.</dl>

  

  <p>The object's <a id=the-htmloptionscollection-interface:supported-property-indices href=https://webidl.spec.whatwg.org/#dfn-supported-property-indices data-x-internal=supported-property-indices>supported property indices</a> are as defined for
  <code id=the-htmloptionscollection-interface:htmlcollection-2><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> objects.</p>

  <p>The <dfn data-dfn-for=HTMLOptionsCollection id=dom-htmloptionscollection-length data-dfn-type=attribute><code>length</code></dfn> getter steps are to return the
  number of nodes <a id=the-htmloptionscollection-interface:represented-by-the-collection href=https://dom.spec.whatwg.org/#represented-by-the-collection data-x-internal=represented-by-the-collection>represented by the collection</a>.</p>

  <p>The <code id=the-htmloptionscollection-interface:dom-htmloptionscollection-length-3><a href=#dom-htmloptionscollection-length>length</a></code> setter steps are:</p>

  <ol><li><p>Let <var>current</var> be the number of nodes <a id=the-htmloptionscollection-interface:represented-by-the-collection-2 href=https://dom.spec.whatwg.org/#represented-by-the-collection data-x-internal=represented-by-the-collection>represented by the
   collection</a>.<li>
    <p>If the given value is greater than <var>current</var>, then:</p>

    <ol><li><p>If the given value is greater than 100,000, then return.<li><p>Let <var>n</var> be <var>value</var> − <var>current</var>.<li><p>Append <var>n</var> new <code id=the-htmloptionscollection-interface:the-option-element-7><a href=form-elements.html#the-option-element>option</a></code> elements with no attributes and no child
     nodes to the <code id=the-htmloptionscollection-interface:the-select-element-2><a href=form-elements.html#the-select-element>select</a></code> element on which <a id=the-htmloptionscollection-interface:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> is rooted.</ol>
   <li>
    <p>If the given value is less than <var>current</var>, then:</p>

    <ol><li><p>Let <var>n</var> be <var>current</var> − <var>value</var>.<li><p>Remove the last <var>n</var> nodes in the collection from their parent nodes.</ol>
   </ol>

  <p class=note>Setting <code id=the-htmloptionscollection-interface:dom-htmloptionscollection-length-4><a href=#dom-htmloptionscollection-length>length</a></code> never removes
  or adds any <code id=the-htmloptionscollection-interface:the-optgroup-element><a href=form-elements.html#the-optgroup-element>optgroup</a></code> elements, and never adds new children to existing
  <code id=the-htmloptionscollection-interface:the-optgroup-element-2><a href=form-elements.html#the-optgroup-element>optgroup</a></code> elements (though it can remove children from them).</p>

  <p>The <a id=the-htmloptionscollection-interface:supported-property-names href=https://webidl.spec.whatwg.org/#dfn-supported-property-names data-x-internal=supported-property-names>supported property names</a> consist of the non-empty values of all the <code id=the-htmloptionscollection-interface:the-id-attribute><a href=dom.html#the-id-attribute>id</a></code> and <code id=the-htmloptionscollection-interface:attr-option-name-2><a href=obsolete.html#attr-option-name>name</a></code> attributes of all the
  elements <a id=the-htmloptionscollection-interface:represented-by-the-collection-3 href=https://dom.spec.whatwg.org/#represented-by-the-collection data-x-internal=represented-by-the-collection>represented by the collection</a>, in <a id=the-htmloptionscollection-interface:tree-order-2 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>, ignoring later
  duplicates, with the <code id=the-htmloptionscollection-interface:the-id-attribute-2><a href=dom.html#the-id-attribute>id</a></code> of an element preceding its <code id=the-htmloptionscollection-interface:attr-option-name-3><a href=obsolete.html#attr-option-name>name</a></code> if it contributes both, they differ from each other, and neither is
  the duplicate of an earlier entry.</p>

  <p id=dom-htmloptionscollection-setter>When the user agent is to <a id=the-htmloptionscollection-interface:set-the-value-of-a-new-indexed-property href=https://webidl.spec.whatwg.org/#dfn-set-the-value-of-a-new-indexed-property data-x-internal=set-the-value-of-a-new-indexed-property>set the value of a new
  indexed property</a> or <a id=the-htmloptionscollection-interface:set-the-value-of-an-existing-indexed-property href=https://webidl.spec.whatwg.org/#dfn-set-the-value-of-an-existing-indexed-property data-x-internal=set-the-value-of-an-existing-indexed-property>set the value of an existing indexed property</a> for a given
  property index <var>index</var> to a new value <var>value</var>, it must run the following
  algorithm:</p>

  <ol><li><p>If <var>value</var> is null, invoke the steps for the <code id=the-htmloptionscollection-interface:dom-htmloptionscollection-remove-2><a href=#dom-htmloptionscollection-remove>remove</a></code> method with <var>index</var> as
   the argument, and return.<li><p>Let <var>length</var> be the number of nodes <a id=the-htmloptionscollection-interface:represented-by-the-collection-4 href=https://dom.spec.whatwg.org/#represented-by-the-collection data-x-internal=represented-by-the-collection>represented by the
   collection</a>.<li><p>Let <var>n</var> be <var>index</var> minus <var>length</var>.<li><p>If <var>n</var> is greater than zero, then <a href=https://dom.spec.whatwg.org/#concept-node-append id=the-htmloptionscollection-interface:concept-node-append data-x-internal=concept-node-append>append</a> a <code id=the-htmloptionscollection-interface:documentfragment><a data-x-internal=documentfragment href=https://dom.spec.whatwg.org/#interface-documentfragment>DocumentFragment</a></code> consisting of <span><var>n</var>-1</span> new <code id=the-htmloptionscollection-interface:the-option-element-8><a href=form-elements.html#the-option-element>option</a></code> elements with no attributes and
   no child nodes to the <code id=the-htmloptionscollection-interface:the-select-element-3><a href=form-elements.html#the-select-element>select</a></code> element on which the <code id=the-htmloptionscollection-interface:htmloptionscollection-3><a href=#htmloptionscollection>HTMLOptionsCollection</a></code>
   is rooted.<li><p>If <var>n</var> is greater than or equal to zero, <a href=https://dom.spec.whatwg.org/#concept-node-append id=the-htmloptionscollection-interface:concept-node-append-2 data-x-internal=concept-node-append>append</a> <var>value</var> to the <code id=the-htmloptionscollection-interface:the-select-element-4><a href=form-elements.html#the-select-element>select</a></code>
   element. Otherwise, <a href=https://dom.spec.whatwg.org/#concept-node-replace id=the-htmloptionscollection-interface:concept-node-replace data-x-internal=concept-node-replace>replace</a> the <var>index</var>th element in the collection by <var>value</var>.</ol>

  <p>The <dfn data-dfn-for=HTMLOptionsCollection id=dom-htmloptionscollection-add data-dfn-type=method><code>add(<var>element</var>, <var>before</var>)</code></dfn>
  method must act according to the following algorithm:</p>

  <ol><li><p>If <var>element</var> is an ancestor of the <code id=the-htmloptionscollection-interface:the-select-element-5><a href=form-elements.html#the-select-element>select</a></code> element on which
   the <code id=the-htmloptionscollection-interface:htmloptionscollection-4><a href=#htmloptionscollection>HTMLOptionsCollection</a></code> is rooted, then throw a
   <a id=the-htmloptionscollection-interface:hierarchyrequesterror-2 href=https://webidl.spec.whatwg.org/#hierarchyrequesterror data-x-internal=hierarchyrequesterror>"<code>HierarchyRequestError</code>"</a> <code id=the-htmloptionscollection-interface:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>If <var>before</var> is an element, but that element isn't a descendant of the
   <code id=the-htmloptionscollection-interface:the-select-element-6><a href=form-elements.html#the-select-element>select</a></code> element on which the <code id=the-htmloptionscollection-interface:htmloptionscollection-5><a href=#htmloptionscollection>HTMLOptionsCollection</a></code> is rooted, then throw
   a <a id=the-htmloptionscollection-interface:notfounderror href=https://webidl.spec.whatwg.org/#notfounderror data-x-internal=notfounderror>"<code>NotFoundError</code>"</a> <code id=the-htmloptionscollection-interface:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>If <var>element</var> and <var>before</var> are the same element, then
   return.<li><p>If <var>before</var> is a node, then let <var>reference</var> be that
   node. Otherwise, if <var>before</var> is an integer, and there is a <var>before</var>th node in the collection, let <var>reference</var> be that node.
   Otherwise, let <var>reference</var> be null.<li><p>If <var>reference</var> is not null, let <var>parent</var> be the parent
   node of <var>reference</var>. Otherwise, let <var>parent</var> be the
   <code id=the-htmloptionscollection-interface:the-select-element-7><a href=form-elements.html#the-select-element>select</a></code> element on which the <code id=the-htmloptionscollection-interface:htmloptionscollection-6><a href=#htmloptionscollection>HTMLOptionsCollection</a></code> is rooted.<li><p><a id=the-htmloptionscollection-interface:pre-insert href=https://dom.spec.whatwg.org/#concept-node-pre-insert data-x-internal=pre-insert>Pre-insert</a> <var>element</var> into <var>parent</var> node before
   <var>reference</var>.</p>
  </ol>

  <p>The <dfn data-dfn-for=HTMLOptionsCollection id=dom-htmloptionscollection-remove data-dfn-type=method><code>remove(<var>index</var>)</code></dfn> method must act
  according to the following algorithm:</p>

  <ol><li><p>If the number of nodes <a id=the-htmloptionscollection-interface:represented-by-the-collection-5 href=https://dom.spec.whatwg.org/#represented-by-the-collection data-x-internal=represented-by-the-collection>represented by the collection</a> is zero, return.<li><p>If <var>index</var> is not a number greater than or equal to 0 and less than the
   number of nodes <a id=the-htmloptionscollection-interface:represented-by-the-collection-6 href=https://dom.spec.whatwg.org/#represented-by-the-collection data-x-internal=represented-by-the-collection>represented by the collection</a>, return.<li><p>Let <var>element</var> be the <var>index</var>th element in the
   collection.<li><p>Remove <var>element</var> from its parent node.</ol>

  <p>The <dfn data-dfn-for=HTMLOptionsCollection id=dom-htmloptionscollection-selectedindex data-dfn-type=attribute><code>selectedIndex</code></dfn> IDL attribute must act
  like the identically named attribute on the <code id=the-htmloptionscollection-interface:the-select-element-8><a href=form-elements.html#the-select-element>select</a></code> element on which the
  <code id=the-htmloptionscollection-interface:htmloptionscollection-7><a href=#htmloptionscollection>HTMLOptionsCollection</a></code> is rooted</p>

  

  


  <h4 id=the-domstringlist-interface><span class=secno>2.6.5</span> The <code id=the-domstringlist-interface:domstringlist><a href=#domstringlist>DOMStringList</a></code> interface<a href=#the-domstringlist-interface class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/DOMStringList title="The DOMString interface is a legacy type returned by some APIs and represents a non-modifiable list of strings (DOMString). Modern APIs use Array objects (in WebIDL: sequence<DOMString>) instead.">DOMStringList</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <p>The <code id=the-domstringlist-interface:domstringlist-2><a href=#domstringlist>DOMStringList</a></code> interface is a non-fashionable retro way of representing a list
  of strings.</p>

  <pre><code class='idl'>[<c- g>Exposed</c->=(<c- n>Window</c->,<c- n>Worker</c->)]
<c- b>interface</c-> <dfn id='domstringlist' data-dfn-type='interface'><c- g>DOMStringList</c-></dfn> {
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <a href='#dom-domstringlist-length' id='the-domstringlist-interface:dom-domstringlist-length'><c- g>length</c-></a>;
  <c- b>getter</c-> <c- b>DOMString</c->? <a href='#dom-domstringlist-item' id='the-domstringlist-interface:dom-domstringlist-item'><c- g>item</c-></a>(<c- b>unsigned</c-> <c- b>long</c-> <c- g>index</c->);
  <c- b>boolean</c-> <a href='#dom-domstringlist-contains' id='the-domstringlist-interface:dom-domstringlist-contains'><c- g>contains</c-></a>(<c- b>DOMString</c-> <c- g>string</c->);
};</code></pre>

  <p class=warning>New APIs must use <code>sequence&lt;DOMString></code> or
  equivalent rather than <code id=the-domstringlist-interface:domstringlist-3><a href=#domstringlist>DOMStringList</a></code>.</p>

  <dl class=domintro><dt><code><var>strings</var>.<a href=#dom-domstringlist-length id=dom-domstringlist-length-dev>length</a></code><dd><p>Returns the number of strings in <var>strings</var>.<dt><code><var>strings</var>[<var>index</var>]</code><dt><code><var>strings</var>.<a href=#dom-domstringlist-item id=dom-domstringlist-item-dev>item</a>(<var>index</var>)</code><dd><p>Returns the string with index <var>index</var> from <var>strings</var>.<dt><code><var>strings</var>.<a href=#dom-domstringlist-contains id=dom-domstringlist-contains-dev>contains</a>(<var>string</var>)</code><dd><p>Returns true if <var>strings</var> contains <var>string</var>, and false
   otherwise.</dl>

  

  <p>Each <code id=the-domstringlist-interface:domstringlist-4><a href=#domstringlist>DOMStringList</a></code> object has an associated <a id=the-domstringlist-interface:list href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a>.</p>

  <p>The <code id=the-domstringlist-interface:domstringlist-5><a href=#domstringlist>DOMStringList</a></code> interface <a id=the-domstringlist-interface:supports-indexed-properties href=https://webidl.spec.whatwg.org/#dfn-support-indexed-properties data-x-internal=supports-indexed-properties>supports indexed properties</a>. The
  <a id=the-domstringlist-interface:supported-property-indices href=https://webidl.spec.whatwg.org/#dfn-supported-property-indices data-x-internal=supported-property-indices>supported property indices</a> are the <a id=the-domstringlist-interface:indices href=https://infra.spec.whatwg.org/#list-get-the-indices data-x-internal=indices>indices</a> of <a id=the-domstringlist-interface:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s
  associated list.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/DOMStringList/length title="The read-only length property indicates the number of strings in the DOMStringList.">DOMStringList/length</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=DOMStringList id=dom-domstringlist-length data-dfn-type=attribute><code>length</code></dfn> getter steps are to return
  <a id=the-domstringlist-interface:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s associated list's <a href=https://infra.spec.whatwg.org/#list-size id=the-domstringlist-interface:list-size data-x-internal=list-size>size</a>.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/DOMStringList/item title="The item() method returns a string from a DOMStringList by index.">DOMStringList/item</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=DOMStringList id=dom-domstringlist-item data-dfn-type=method><code>item(<var>index</var>)</code></dfn> method steps are to
  return the <var>index</var>th item in <a id=the-domstringlist-interface:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s associated list, or null if
  <var>index</var> plus one is greater than <a id=the-domstringlist-interface:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s associated list's <a href=https://infra.spec.whatwg.org/#list-size id=the-domstringlist-interface:list-size-2 data-x-internal=list-size>size</a>.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/DOMStringList/contains title="The contains() method returns a boolean indicating whether the given string is in the list.">DOMStringList/contains</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1.5+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=DOMStringList id=dom-domstringlist-contains data-dfn-type=method><code>contains(<var>string</var>)</code></dfn> method steps
  are to return true if <a id=the-domstringlist-interface:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s associated list <a href=https://infra.spec.whatwg.org/#list-contain id=the-domstringlist-interface:list-contains data-x-internal=list-contains>contains</a> <var>string</var>, and false otherwise.</p>

  


  <nav><a href=urls-and-fetching.html>← 2.4 URLs</a> — <a href=index.html>Table of Contents</a> — <a href=structured-data.html>2.7 Safe passing of structured data →</a></nav>
